gpt4 book ai didi

javascript - Angular JS 基于单选按钮状态突出显示行

转载 作者:行者123 更新时间:2023-12-03 10:50:24 25 4
gpt4 key购买 nike

我有一个包含一组行的表,使用 ng-repeat:

<tr ng-repeat="model in modelList" ng-class="{hilite : model.select}">

每一行都有一个单选按钮,如下所示:

<input type="radio" name="modelGroup" ng-model="model.select">

单选按钮可以工作,但我正在尝试设置行的类以通过单击的单选按钮突出显示该行的背景。

在这里:http://plnkr.co/edit/WSgC4Y4FmlzOr7Bfmlpp?p=preview

我已经用复选框这样做了好几次了,所以我无法弄清楚单选按钮出了什么问题。在中继器中,我虽然每一行都有自己的范围,所以模型的状态会影响 TR,不是吗?

最佳答案

给您的输入一个值并更改模型值以指向同一模型,因为它是单选按钮并且数据需要独占

<input type="radio" name="modelGroup" ng-model="selected.value" value="{{$index}}">

将你的 ng-class 更改为

ng-class="{hilite : selected.value == $index}"

还要确保在 Controller 中创建变量,并且它应该位于不同的父级下,否则 ng-repeat 会将其混淆为其数据的子级

$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

关于javascript - Angular JS 基于单选按钮状态突出显示行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28442240/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com