角度：ng-repeat内でng-classを動作させることができません

Question

私はここで常に答えを見つけていますが、何年も質問を投稿していません。私は現在の質問に似た質問を読みましたが、私が見つけたすべてのヒントを適用した後、私はまだコードを取得できません。私はng-classを使って条件付きでクラスを割り当てようとしていますが、動作しません。

ng-classを追加しようとする場合を除いて、これらのファイルはすべてangularJSで非常に機能する非常に大きなファイルです（関連するコードを以下に掲載します）。選択したプロパティのブール値としてボタンのテキストを入れて、正しく切り替えるようにしました。ちょうどngクラスのために働かない。

ありがとうございます！

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

さて、それは働きました！問題は、私が使用していた第三者のCSSファイルが "！important"とマークされていることがわかったので、私のCSSはそれを上書きできませんでした。私は今クラスの色を「重要」とマークしているので、正しく機能しています。私はスタイルクラスの問題を抱えている次回をチェックすることを覚えています！みんなありがとう！

Answer 2

私はデモを作成し、それが正常に動作しているようです。これは大きなコードのほんの一部なので、関連するスタイルクラスが適切に追加されていることを確認してください。

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>