基于单选按钮状态的Angular JS突出显示行答案

【问题标题】：Angular JS highlight row based on radio button state基于单选按钮状态的Angular JS突出显示行
【发布时间】：2015-02-10 21:34:47
【问题描述】：

我有一个包含一组行的表，使用 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

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

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-class

【解决方案1】：

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

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

将您的 ng-class 更改为

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

还要确保在控制器中创建变量，并且它应该位于不同的父级下，否则 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

【讨论】：

很酷，但在取消选择单选按钮时突出显示不会消失。
是的，我意识到，您确定要单选按钮而不是复选框吗？您构建数据的方式表明您需要复选框，因为数组中的每个对象都有一个可以为真或假的选择。
不，他们出于某种原因想要收音机。他们想明确表示这些选择是相互排斥的。正如我所说，复选框我已经做了很多次没有问题。
那么你应该改变你的数据结构，单选框应该指向一个模型而不是每个单选框的模型，否则它不能是独占的。
但是如果它是一个模型，那么 ng-class 会绑定到什么？