javascript - Angular: Can't get ng-class to work inside ng-repeat -


i find answers here time, haven't posted question in years. i've read through questions similar current one, after applying tips i've found, still can't code work. trying assign class conditionally using ng-class , it's not working.

these large files (so i'll post relevant code below) working great angularjs except trying add ng-class. i've put button text boolean value selected property make sure toggles correctly, , does. doesn't work ng-class.

thanks in advance!

html:

<div>     <div><em>click buttons below show or hide bills each issue.</em></div>     <button ng-repeat="type in issuetypes" ng-click="togglebtn(type.show, $index)"              class="w3-button w3-round-small w3-light-blue btn-space"              ng-class="{'testing' : type.selected}">{{type.selected}}</button>    </div> 

css:

 .testing {     color: red; } 

js:

    $scope.issuetypes = [{name: "education", show: "education", selected: false}, {name: "health care", show: "health", selected: false},       {name: "civil rights", show: "civil", selected: true}, {name: "gun control", show: "guns", selected: false}, {name: "women's rights", show: "women", selected: false}];      $scope.togglebtn = function(showstring, index) {     $scope[showstring] = !$scope[showstring];     $scope.issuetypes[index].selected = !$scope.issuetypes[index].selected;   } 

i create demo , seems working fine. since small part of larger code, make sure relevant style classes added.

angular.module("app",[])  .controller("ctrl",function($scope){      $scope.issuetypes = [{name: "education", show: "education", selected: false}, {name: "health care", show: "health", selected: false},            {name: "civil rights", show: "civil", selected: true}, {name: "gun control", show: "guns", selected: false}, {name: "women's rights", show: "women", selected: false}];                  $scope.togglebtn = function(showstring, index) {          $scope.issuetypes[index].selected = !$scope.issuetypes[index].selected;      }    })
.testing {     color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="ctrl">    <div>            <div><em>click buttons below show or hide bills each issue.</em></div>            <button ng-repeat="type in issuetypes" ng-click="togglebtn(type.show, $index)" class="w3-button  w3-round-small w3-light-blue btn-space"   ng-class="{'testing' :type.selected}">{{type.selected}}</button>             </div>  </div>


Comments