程序员经验分享-hwhale

选定的表行 angular.js

2023-12-12

我有一张桌子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>

基本上它的作用是根据 vulnS 核心值对行进行着色；效果很好！，但我需要能够选择行，我通过执行以下操作来实现这一点：

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

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

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

我所取得的成就

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

我真正想要的是什么

如果有人可以帮助我，我将非常感激！


尝试这个。

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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

angularJS

选定的表行 angular.js 的相关文章