Seçilen tablo satırı

Question

Böyle ng-class yönergesi ile bir tablo var angularjs:

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

Temelde ne yaptığını, vulnScore değerine bağlı olarak satırlar renklendirmek olduğu; Bu harika çalışıyor !, ama ben tarafından yapıyor bu acomplished, satırları seçin edebilmek gerekir:

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

ve işe yarıyor ... ama öyle tek şey, çünkü beyaz metin değiştirmektir Zaten üzerinde hareket eden bir renk sınıfı var ... Seçtiğinizde oyunculuk sınıfını (başarı, uyarı veya tehlike) kaldırabilmem ve diğeri seçildiğinde geri koyabilmem gerekiyorsa, sadece bir tane varsa kolay olurdu sınıf ... ama hangisinin ilk sırada olduğunu ve nasıl geri getirileceğini nasıl bilebilirim bilmiyorum!

What I acomplished

ve ne ne Tamamladılar nasıl bir şey olduğunu:: (ilk satır seçildi):

Bu benim ne var

What I actually want

birisi yardımcı olabilir gerçekten takdir ediyorum! Bunu deneyin.

Answer 1

bunu deneyin.

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>