选定表行angular.js [英] selected table row angular.js

问题描述

我有这样的纳克级指令表：

 ＆LT;＆TBODY GT;
      ＆LT; TR风格=光标：指针类=点击行NG重复=商行device.firmwaresNG-CLASS ={'成功'：firm.vulnScore＆LT; = 4，警告：5℃ = firm.vulnScore，危险：8示= firm.vulnScore}＆GT;
          ＆所述; TD＆GT; {{firm.fileName}}＆下; / TD＆GT;
          ＆所述; TD＆GT; {{firm.extracted}}＆下; / TD＆GT;
          ＆所述; TD＆GT; {{firm.vulnScore}}＆下; / TD＆GT;
          ＆所述; TD＆GT; {{firm.date}}＆下; / TD＆GT;
      ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
 

基本上它做什么，是颜色取决于vulnScore值的行;该工程巨大！但我需要能够选择行，我acomplished，通过这样做的：

  $（'＃firm_table'）。在（'点击'，'.clickable行'，函数（事件）{
    $（本）.addClass（BG-小学）的兄弟姐妹（）removeClass移除（BG-小学）。
}）;
 

和它的作品...但它的唯一的事情就是改变文字的白色，因为已经有颜色级演技就可以了......我需要能够去除表演课（成功，警告或危险）被选中，并把它放回去另一种选择的时候时我会很容易的，如果只是有一个类......但我不知道怎么知道我有哪一个摆在首位，如何把它回来了！

这是我有：（第一行被选中）：

我acomplished

和我什么acomplish是一样的东西：

什么其实我是想

如果有人能帮助我真的AP preciate呢！

解决方案

试试这个。

\r

\r

VAR应用= angular.module（应用程序，[]）;\r
\r
app.controller（CTRL功能（$范围）{\r
  $ scope.rowIndex = -1;\r
  $ 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}];\r
 \r
  $ scope.selectRow =功能（指数）{\r
      如果（指数== $ scope.rowIndex）\r
        $ scope.rowIndex = -1;\r
        其他\r
          $ scope.rowIndex =指数;\r
    }\r
  }）;

\r

.success {\r
  背景颜色：绿色;\r
  }\r
\r
。警告{\r
   背景色：黄色;\r
  }\r
\r
。危险{\r
  背景色：红色;\r
  }\r
.bg小学{\r
  颜色：白色;\r
   背景色：蓝色;\r
  }

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL级=面板组ID =手风琴＆GT;\r
  \r
  ＆LT;表＆gt;\r
    {{selectedRow}}\r
     ＆LT; TR NG重复=项中的项目NG-CLASS ={'成功'：item.score＆LT; = 4，警告：5℃= item.score，危险：8示= item.score BG-小学：rowIndex位置== $指数}NG点击=selectRow（$指数）＆GT;\r
             ＆所述; TD＆GT; {{item.name}}＆下; / TD＆GT;\r
             ＆所述; TD＆GT; {{item.score}}＆下; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
            \r
＆LT; / DIV＆GT;

\r

\r

\r

I have a table with the ng-class directive like this:

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

Basically what it does, is to color the rows depending on the vulnScore value; that works great!, but I need to be able to select the rows, I acomplished that by doing:

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

and it works...but the only thing that it does is to change the text white, because there's already a color class acting on it... I need to be able to remove the acting class(success,warning or danger) when is selected and put it back when another is selected, i'd be easy if there was just one class...but I don't know how to know which one I had in the first place and how to put it back!

This is what I have:(the first row is selected):

What I acomplished

and what I what to acomplish is something like:

What I actually want

if someone can help i'd really appreciate it!

解决方案

try this.

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>

这篇关于选定表行angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！