Question

这是How to highlight a selected row in ngRepeat?

的后续问题

这里使用控制器中定义的函数突出显示行。我想反过来，我想只使用HTML中的代码。以下是我尝试过的我的傻瓜。 Plunker 请与您分享您对此问题的看法：

<tr ng-repeat="item in items" 
         ng-init="selectedRow = null"
          ng-class="{'selected':selectedRow == $index}" 
          ng-click="selectedRow=$index" ></tr>

Answer 1

看看这个Demo

<tr ng-repeat="item in items" 
         ng-init="selectedRow = null"
          ng-class="{'selected':$parent.selectedRow == $index}" 
          ng-click="$parent.selectedRow=$index" >
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
           <td><button class="btn btn-primary" ng-click="edit(item)">Click</button></td>

</tr>

function ListCtrl($scope, $dialog) {

  $scope.items = [
    {name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];

 $scope.selected = -1;


}

Answer 2

您的问题是ng-repeat将在每次迭代时创建自己的子范围，该范围具有自己的selectedRow变量。这就是为什么当你点击它激活类但不会删除，因为下一行是设置selectedRow变量的不同实例。

您可以使用selectedRow引用$parent.selectedRow或重新构建$scope以展示您绑定的属性。后者解决了一些人直接使用范围ng-model报告的问题。

$scope.model = {
    items: [],
    selectedRow: 0
}

Answer 3

请从以下示例中了解： -

使用 ng-class-odd 和 ng-class-even

＆lt; ol ng-init =“names = ['John'，'Mary'，'Cate'，'Suz']”＆gt;

＆lt; li ng-repeat =“姓名中的姓名”＆gt;

＆lt; span ng-class-odd =“'odd'”ng-class-even =“'even'”＆gt;

{{name}}

＆LT; /跨度＆GT;

＆LT; /锂＆GT;

＆LT; /醇＆GT;

Answer 4

如果您想使用CSS处理上述条件，请使用angularJS ng-class-even 和 ng-class-odd 的文本。

因此，虽然执行两者都会渲染，但任何一个都只会生效。

仅使用HTML中的逻辑突出显示ng-repeat中的选定行

4 个答案: