選択されたテーブルの行は、私はこのような<code>ng-class</code>ディレクティブを持つテーブルを持っている

Question

をangular.js：

<tbody> 
     <tr style="cursor: pointer" class="clickable-row" ng-repeat="firm in device.firmwares" ng-class="{'success': firm.vulnScore<= 4,'warning' :5<= firm.vulnScore,'danger' : 8<=firm.vulnScore}"> 
      <td>{{firm.fileName}}</td> 
      <td>{{firm.extracted}}</td> 
      <td>{{firm.vulnScore}}</td> 
      <td>{{firm.date}}</td> 
     </tr> 
</tbody> 

基本的にそれが何、vulnScore値に応じて行を着色することです。それは素晴らしい作品！しかし、私は行を選択できるようにする必要があり、私が実行していることをacomplished：

$('#firm_table').on('click', '.clickable-row', function(event) { 
    $(this).addClass('bg-primary').siblings().removeClass('bg-primary'); 
}); 

とそれが動作する...しかし、それがないことを唯一のものは白のテキストを変更することである、なぜなら既に色のクラスがあります...私は演技のクラス（成功、警告、または危険）を選択し、別のものが選択されたらそれを戻すことができる必要があります。クラス...しかし、私はどのように私が最初に持っていたか、それを戻す方法を知る方法を知らない！

これは私が持っているものである：（最初の行が選択されている）：

What I acomplished

と私は何acomplishすることのようなものです：誰かが助けることができるかどうか

What I actually want

私は本当にそれを感謝したい！

Answer 1

これを試してください。

var app = angular.module("app",[]); 
 

 
app.controller("ctrl" , function($scope){ 
 
    $scope.rowIndex = -1; 
 
    $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"amir","score":7},{"name":"amir","score":5},{"name":"asd","score":10},{"name":"jim","score":8},{"name":"babak","score":6},{"name":"vfrt","score":8},{"name":"cdsa","score":7},{"name":"amir","score":10},{"name":"majid","score":3}]; 
 
    
 
    $scope.selectRow = function(index){ 
 
     if(index == $scope.rowIndex) 
 
     $scope.rowIndex = -1; 
 
     else 
 
      $scope.rowIndex = index; 
 
    } 
 
    });

.success{ 
 
    background-color:green; 
 
    } 
 

 
.warning{ 
 
    background-color:yellow; 
 
    } 
 

 
.danger{ 
 
    background-color:red; 
 
    } 
 
.bg-primary{ 
 
    color:white; 
 
    background-color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion"> 
 
    
 
    <table> 
 
    {{selectedRow}} 
 
    <tr ng-repeat="item in items" ng-class="{'success': item.score<= 4,'warning' :5<= item.score,'danger' : 8<=item.score,'bg-primary':rowIndex == $index }" ng-click="selectRow($index)" > 
 
      <td>{{item.name}}</td> 
 
      <td>{{item.score}}</td> 
 
     </tr> 
 
</table> 
 
      
 
</div>