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

Question

这是 How to highlight a selected row in ngRepeat?

的后续问题

此处使用 controller.I 中定义的函数突出显示该行，我想反过来，我只想使用 HTML 中的代码。下面是我试过的 plunker。 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 变量。这就是为什么当您单击它时它会激活 class 但不会删除，因为下一行正在设置 selectedRow 变量的不同实例。

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

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

Answer 3

请从下面的例子中理解：-

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

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">

<li ng-repeat="name in names">

<span ng-class-odd="'odd'" ng-class-even="'even'">

{{name}}

</span>

</li>

</ol>

Answer 4

如果您想使用CSS来处理上述情况，请使用angularJS ng-class-even 和ng-class-奇数.

所以当执行两者时都会渲染，但任何一个都会起作用。

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

Highlight selected row in ng-repeat with logic only in HTML

javascript

angularjs

ng-repeat

angularjs-ng-click