how to unlock/enable and change opacity/transparency of a with angular when some is clicked

Question

I want to simulate an effect similar to ng-disable in buttons which disables and makes button semitransparent, but on a div.

I'm using ionic framework (just in case).

I have this div, I want it to have transparency/opacity to 50% and to be disabled at the beginning:

  <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>

But once a button in an another div has been clicked to make its transparency to 0% and to enable all contents inside the first div, this is the other div, So on cityClick() I want to trigger something that unlocks/enables all contents in first div and sets tranparency of first div to 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>

I'm a newbie with angular so I just want someone to point me in the right direction to do this.

Answer 1

I could do this by using ng-class to toggle between two classes 1 with opacity and the other one without opacity and using the same var of ng-class to ng-disable enable the button:

      <!-- 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>