選定的表格行 angular.js

Question

我有一個帶有ng-class指令的表，如下所示：

<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 值為行着色； 效果很好！，但我需要能夠選擇行，我通過以下方式完成了：

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

並且它有效......但它唯一做的就是將文本更改為白色，因為已經有一個顏色類在作用於它......我需要能夠在以下情況下刪除表演類（成功，警告或危險）被選中並在另一個被選中時放回去，如果只有一個類，我會很容易......但我不知道如何知道我首先擁有的是哪個以及如何放回它！

這就是我所擁有的：（第一行被選中）：

我完成的

我要完成的事情是這樣的：

我真正想要的

如果有人可以幫助我真的很感激！

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>