如何解锁/启用和更改带有 Angular 的不透明度/透明度，当<div> <button> 某些被单击时

Question

我想在按钮中模拟一个类似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>

我是一个新手，所以我只是希望有人给我指出正确的方向。

Answer 1

我可以通过使用ng-class在两个类之间切换来做到这一点，一个是不透明的，另一个是不透明的，并使用相同的ng-class变量来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>