基于单选按钮状态的角度JS高亮显示行
Angular JS highlight row based on radio button state
我有一个包含一组行的表,使用ng repeat:
<tr ng-repeat="model in modelList" ng-class="{hilite : model.select}">
每行都有一个单选按钮,如下所示:
<input type="radio" name="modelGroup" ng-model="model.select">
单选按钮可以工作,但我正在尝试设置行的类,以使用单击的单选按钮突出显示行的背景。
Plunkr在这里:http://plnkr.co/edit/WSgC4Y4FmlzOr7Bfmlpp?p=preview
我已经用复选框这样做了好几次了,所以我不知道单选按钮出了什么问题。在中继器中,我认为每一行都有自己的范围,所以模型的状态会影响TR,不是吗?
给您的输入一个值,并将模型值更改为指向同一模型,因为它是一个单选按钮,数据需要是唯一的
<input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}">
将ng类更改为
ng-class="{hilite : selected.value == $index}"
还要确保您在控制器中创建了变量,并且它应该属于不同的父级,否则ng重复会将其混淆为其数据的子级
$scope.selected = {value: null}
所以看起来像
<tr ng-repeat="model in modelList" ng-class="{hilite : selected.value == $index}">
<td>
<input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}">
</td>
<td>{{ model.NDPName }}</td>
<td>{{ model.OEM }}</td>
<td>{{ model.version }}</td>
<td>{{ model.dateAdded }}</td>
<td>{{ model.validUntil }}</td>
</tr>
我已经更改了你的plunk
相关文章:
- jquery.nav.js活动部分高亮显示点击后停止工作
- 基于单选按钮状态的角度JS高亮显示行
- Angular js-当值发生变化时高亮显示dom
- 什么'这是在angular JS中创建一个表的好方法,当单元格发生变化时,该表会高亮显示
- AngularJS和Highlight.js的动态语法高亮显示
- (Dygraphs JS)我如何禁用NaN点的传奇高亮
- 我如何使第一个片段(高亮显示)在reveal.js中自动可见
- js的纹理和高亮问题
- JS正则表达式名称高亮显示
- 高亮显示.js内联模式
- 如何在侧边栏中使用js单击后保持导航菜单高亮显示
- 在Ext JS中单击图表中的条形图时,使其保持高亮
- Backbone.js高亮显示,页面上有大量数据
- 高亮js代码不工作
- JS代码高亮显示正则表达式
- VS 2015: JS文件中没有高亮和智能感知
- 在angular js中,单击按钮时,高亮显示ng-repeat表中出现的文本框
- Xcode 4不为项目文件保存语法高亮显示?(并且不自动识别JS文件?!)
- 在Reveal.js中语法高亮显示代码
- Angular JS文本高亮指令