Angular：无法让ng-class在ng-repeat中工作

Question

I find answers here all the time, but haven't posted a question in years. I've read through questions similar to my current one, but after applying all the tips I've found, I still can't get my code to work. I am trying to assign a class conditionally using ng-class and it's not working.

These are all very large files (so I'll just post relevant code below) that are working great with angularJS except for trying to add ng-class. I've put the button text as the boolean value for the selected property to make sure that it toggles correctly, and it does. Just doesn't work for ng-class.

Thanks in advance!

HTML:

<div>
    <div><em>Click buttons below to show or hide bills for 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;
  }

Answer 1

I create a demo and it seems to be working fine. Since this is a small part of the larger code, make sure the relevant style classes are properly 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 to show or hide bills for 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> 

Answer 2

Okay, got it working! Found that the problem was the 3rd party CSS file I was using had their color marked "!important", so that was why my CSS wasn't able to override it. I've now marked my class's color "!important" and so it is working properly. Got to remember to check for that next time I'm having a style class issue!! Thanks for everyone's help!