选定的表行 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(使用前将#替换为@)

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

随机推荐

  • 将对象转换为数组的 PHP 错误

    我之前有过这个问题 最后得出的结论是这是 5 2 5 中的一个错误 好吧 它在 5 2 6 中仍然有问题 至少对我来说 请告诉我它是否损坏或对您有用 obj new stdClass obj gt foo bar obj gt 0 zero
  • 在 Oracle SQL 中使用复杂 IF 语句

    您好 我正在尝试在 Band 属性中编写 If 语句 但没有成功 T T 我想做的是根据所有者类别 棚屋和供水属性设置单个角色 A B C D 任何帮助都会很棒 CREATE TABLE Rent Band Plot ID NUMBER 3
  • 从字符串列表中提取每个单词

    我正在使用Python 我的清单是 str Hello dude What is your name My name is Chetan 我想将字符串中每个句子中的每个单词分开并将其存储在new list中 new list 会像 new
  • 通过“this”与“prototype”分配函数有什么区别? [复制]

    这个问题在这里已经有答案了 可能的重复 在 Javascript 中使用 prototype 与 this 我对这两种向函数添加方法的类型感到困惑 让我用一个例子来解释一下 var foo function this bar functio
  • ConvertTo 函数中 Mat 的内存泄漏

    我在管理函数中的内存时遇到一些问题 Valgrid 说我在转换函数后出现内存泄漏 难道是因为数据没有正常发布 我尝试使用临时指针 但我的程序崩溃或无法正常工作 以前有人遇到过这个问题吗 this gt images push back ne
  • css“[class*=my-class].my-subclass”在做什么?

    我继承了一些 css 并且在网上到处搜索以了解 css 块所表达的内容 如下所示 class wrapper logo padding top 32px important 星号和方括号的作用是什么 在谷歌上搜索 和 很困难 如果这个问题很
  • Java Map 的递归迭代

    我正在编写一个递归函数 其目的是迭代 pList 文件 我的代码是 public static void HashMapper Map lhm1 throws ParseException Set set jsonObject keySet
  • 如何恢复隐藏的未提交的更改

    我的开发分支中有一些未提交的更改 我使用git stash 但在那些隐藏的变化中 有一些非常重要的变化 有什么办法可以恢复这些更改吗 另外 从那以后我对隐藏的代码文件进行了一些更改 如果可能的话 我是否有机会检索新分支中隐藏的更改 这个简单
  • Swift 3:泛型中 TapGestureRecognizer 内的委托不会被调用

    我有一个像这样的协议 public protocol SubmitAgeDelegate class func changeSubmitButtonBool 问题是我想在泛型类中调用它 open class GenericControlle
  • 当悬停图像时,其余图像会更改过滤器

    我有 10 张图像 当我将鼠标悬停在其中一张时 我希望剩下的 9 张图像可以更改过滤器 这就是我所拥有的 CSS posts wrapper hover posts webkit filter blur 10px jQuery docume
  • Android,静音模式通知

    在我的 Android 应用程序中 我需要知道 每当用户处于电话选项模式 按住电源按钮一段时间时出现的模式 并按下 静音模式 按钮时 我发现飞行模式与ACTION AIRPLANE MODE CHANGED 但我找不到 静音模式 按钮的任何
  • 翻译为 DCG Semicontext 不起作用 - 继续

    作为对此的后续行动question这提出了问题 返回列表中项目的计数 但如果两个相同的项目彼此相邻 则不增加计数 这段代码是我用 DCG 和半上下文解决这个问题的最接近的代码 lookahead C C gt C empty list No
  • 自动完成文本视图还是搜索对话框?

    我需要做的只是可以单击关键字的建议并将用户带到界面 xml 布局 例如下面的结果 存在 丰富 缺乏 我在 R layout abide 中创建了它们 Though AutoCompleteTextView看起来没那么麻烦 但是可以做到吗 或
  • 规则已被弃用,取而代之的是什么呢(TSQL)?

    规则 Transact SQL 1 是可重用的 从而克服了检查约束不可重用的缺点 现在我读到 1 此功能将在 Microsoft SQL Server 的未来版本中删除 避免在新的开发工作中使用此功能 并计划修改当前使用此功能的应用程序 我
  • 在地图中绘制半径为定义距离的圆

    我能够绘制地图并为特定点添加标题 library maps map state text 80 83 35 19 Charlotte cex 6 我还可以绘制一个以该点为中心的圆 symbols 80 83 35 19 circles 2
  • 如何从 HTML 页面获取 Javascript 变量?

    在互联网页面的源代码中 有一个包含 JSON 数据的 Javascript 变量 我想将其存储在 PHP 程序的变量中 知道如何做吗 该文件位于公共 html 链接上 如下所示 感谢您的时间和答复 您使用 互联网上的页面 和 公共 这两个词
  • 如何以编程方式知道它是Android中的平板电脑还是手机? [复制]

    这个问题在这里已经有答案了 我想检测给定的设备是 Android 中的平板电脑还是手机 我已经在模拟器中尝试过这两个 但没有成功 两者都在这里 First if getResources getConfiguration screenLay
  • 如何在 TextArea 上使用 TAB/Enter KeyPressed,并在不使用内部 API 的情况下替换为 focustraversal 或 Enter 键?

    我需要一个可以自动换行 添加滚动条等的控件 但忽略回车键并使用 tab shift 选项卡跳转到下一个控件 我似乎无法弄清楚这一点 这是我做的控件 看起来只是简单的停留在文本区域 这是从网上的一个旧示例中使用的 似乎只有当 textArea
  • JAX-RS / Jersey 中可变参数数组的路径段序列?

    JAX RS Jersey 允许使用以下方法将 URL 路径元素转换为 Java 方法参数 PathParam注释 有没有办法将未知数量的路径元素转换为 vararg Java 方法的参数 I e foo bar x y z应该转到方法 f
  • 选定的表行 angular.js

    我有一张桌子ng class像这样的指令 tbody tr class clickable row td firm fileName td td firm extracted td td firm vulnScore td td fir t