Angularjs: highlight a button on click

Question

       <tbody md-body>
          <tr md-row md-select="dessert"  md-select-id="name" ng-model="participant.partName" md-auto-select ng-repeat="participant in participants track by participant.partName | filter: search">
            <td md-cell>{{participant.partName}}</td>

            <td md-cell><img src="./images/mute.png" ng-click="mutePart(participant.partName);" title="Mute" 
                                ng-class="{'selected-image' : participant.partName === muteSelected}" /></td>
            <td md-cell><img src="./images/unmute.png"  ng-click="unmutePart(participant.partName);" title="Unmute" 
                                ng-class="{'selected-image' : participant.partName === unmuteSelected}"/></td>                  

          </tr>
        </tbody>

JS:

$scope.mutePart = function(muteSelected) {         
  $scope.muteSelected = muteSelected;
  $scope.unmuteSelected = null;
  $rootScope.muteInd = true;
  $rootScope.muted = true;

}

$scope.unmutePart = function(unmuteSelected) {
  $scope.unmuteSelected = unmuteSelected;
  $scope.muteSelected = null;
  $rootScope.mutInd = false;
  $rootScope.muted = false;
}

CSS: .selected-image { border: 1px solid red; }

I have mute, unmute image buttons for various endpoints. For the 1st endpoint, you click on mute, it gets selected but if you click on mute of 2nd endpoint the previously selected mute of 1st endpoint is not selected anymore. I want to keep all the clicked buttons of mute or unmute to be highlighted.. Currently only 1 button gets selected on click.

Have you checked out ng-class? That can style items for you dependent on model properties .http://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional — PeterS, Nov 10 '16 at 16:09
Yea, I tried that : css: .selected-image { border: 15px solid red; } — Anuja Patil, Nov 10 '16 at 16:17
you are calling the function not the property, please paste your mutePart(participant.partName) function. — Alessandro Santamaria, Nov 10 '16 at 16:19
@Anuja Patil paste your updated HTML and JS code to validate — Pitchiah Natarajan, Nov 10 '16 at 17:47
If possible, create a cutdown js-fiddle with what you are trying to do. — PeterS, Nov 11 '16 at 08:10
I have pasted the updated html, Js code. Now the button is highlighted on click but I want it to stay highlighted for all the clicked buttons of endpoints.. — Anuja Patil, Nov 15 '16 at 13:51

Angularjs: highlight a button on click

0 Answers0