Question

我一直在这里找到答案，但多年来一直没有发表问题。我已经阅读了类似于我当前的问题，但在应用了我发现的所有提示之后，我仍然无法让我的代码工作。我试图使用ng-class有条件地分配一个类，它不起作用。

除了尝试添加ng-class之外，这些都是非常大的文件（因此我将在下面发布相关代码）与angularJS一起使用。我将按钮文本作为所选属性的布尔值，以确保它正确切换，并且确实正确切换。只是不适合ng-class。

提前致谢！

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

我创建了一个演示，它似乎工作正常。由于这只是较大代码的一小部分，因此请确保正确添加相关样式类。

＆＃13;

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;
    }

})

＆＃13;

.testing {     color: red; }

＆＃13;

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

＆＃13;

Answer 2

好的，让它运转起来！发现问题是我使用的第三方CSS文件的颜色标记为“！important”，所以这就是为什么我的CSS无法覆盖它。我现在标记了我班级的颜色“！important”，所以它正常工作。下次我有风格课问题时要记得检查一下！谢谢大家的帮助！

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

2 个答案: