Angular JS 根据单选按钮状态高亮行

Question

我有一个带有一组行的 table，使用 ng-repeat:

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

每一行都有一个单选按钮，如下所示：

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

单选按钮有效，但我试图设置行的 class 以突出显示单击单选按钮的行的背景。

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

我已经用 复选框 以这种方式完成了几次，所以我无法弄清楚单选按钮有什么问题。在转发器中，我虽然每一行都有自己的范围，所以模型的状态会影响 TR，不是吗？

Answer 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

Angular JS 根据单选按钮状态高亮行

Angular JS highlight row based on radio button state

javascript

angularjs

angularjs-ng-repeat

ng-class