选定的表行 angular.js

Posted 2023-03-05

【中文标题】选定的表行 angular.js

【英文标题】：selected table row angular.js

【发布时间】：2016-07-11 03:33:15

【问题描述】：

我有一张带有 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');
);

它可以工作......但它唯一要做的就是将文本更改为白色，因为已经有一个颜色类作用于它......我需要能够删除代理类（成功，警告或危险）何时选择并在选择另一个时将其放回，如果只有一个类，我会很容易......但我不知道如何知道我首先拥有哪一个以及如何放置它回来！

这就是我所拥有的：（第一行被选中）：

What I acomplished

我要完成的事情是这样的：

What I actually want

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

【参考方案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>

【讨论】：

是的......这基本上就是我所做的......但是成功，警告和危险类已经由引导程序定义，并且背景颜色在所有这些类中都定义了，所以当我添加一个新类，新类不会覆盖旧类，所以基本上我最终得到的是一个具有相同颜色但白色文本的表格行；我现在正在发布一张图片，以便您了解发生了什么！

我添加了两张图片，第一张是我目前已经完成的，第二张是我想要完成的！

为什么不为此使用自定义类？

是的...我想我可以...但我不明白重点...在我看来，同样的事情会再次发生...不是吗？

我只是为了它而添加了我的自定义类，它都是一样的，“背景颜色”属性没有改变！，它被红色，黄色或绿色卡住了，我真的需要帮助！