选定的表格行 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>