0

我想在按钮中模拟类似于 ng-disable 的效果，该效果禁用并使按钮半透明，但在 div 上。

我正在使用离子框架（以防万一）。

我有这个 div，我希望它的透明度/不透明度为 50%，并在开始时被禁用：

  <div class="suboption">

    <div class="description-and-dropdown-wrapper" >

      <h4>{{specialtyName}}</h4>

      <div class="buttons">
        <button class="button button-icon ion-ios-arrow-down"  ng-click="specialtiesPopover.show($event)">

          <script id="popoverSpecialties.html" type="text/ng-template">
            <ion-popover-view>
              <ion-content >
                <div class="list">
                  <ul>
                    <li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
                      {{specialty.name}}
                    </li>
                  </ul>
                </div>
              </ion-content>
            </ion-popover-view>
          </script>
        </button>

      </div>

    </div>

  </div>

但是，一旦单击另一个 div 中的按钮以使其透明度为 0% 并启用第一个 div 中的所有内容，这就是另一个 div，所以在 cityClick() 我想触发解锁/启用所有内容的东西在第一个 div 中并将第一个 div 的透明度设置为 0%：

    <div class="description-and-dropdown-wrapper">

      <h4>{{cityName}}</h4>

      <div class="buttons">
        <button class="button button-icon ion-ios-arrow-down" ng-click="citiesPopover.show($event)">

          <script id="popoverCities.html" type="text/ng-template">
            <ion-popover-view>
              <ion-content >
                <div class="list">
                  <ul>
                    <li class="item" ng-repeat="city in cities" ng-click="cityClick(city)">   //NOTICE cityClick() HERE
                      {{city.name}}   
                    </li>
                  </ul>
                </div>
              </ion-content>
            </ion-popover-view>
          </script>
        </button>

      </div>

    </div>

  </div>

我是一个有角度的新手，所以我只想有人指出我正确的方向来做到这一点。

4

1 回答 1

0

我可以通过使用 ng-class 在两个具有不透明度的类 1 和另一个不具有不透明度的类之间切换并使用 ng-class 的相同 var 来 ng-disable 启用按钮：

      <!-- ng-class with ternary operator: if disableSpecialty then class=disabled-suboption else class=suboption -->
      <div ng-class="disableSpecialty ? 'disabled-suboption' : 'suboption'" class="all-suboption">

        <div class="description-and-dropdown-wrapper" >

          <h4>{{specialtyName}}</h4>

          <div class="buttons">
            <!-- if disableSpecialty === true then disable the button-->
            <button class="button button-icon ion-ios-arrow-down" ng-disabled="disableSpecialty" ng-click="specialtiesPopover.show($event)">

              <script id="popoverSpecialties.html" type="text/ng-template">
                <ion-popover-view>
                  <ion-content >
                    <div class="list">
                      <ul>
                        <li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()">
                          {{specialty.name}}
                        </li>
                      </ul>
                    </div>
                  </ion-content>
                </ion-popover-view>
              </script>
            </button>

          </div>

        </div>

      </div>
于 2015-09-08T19:17:03.367 回答