如何突出显示ngRepeat中选定的行？
我找不到能够帮助我解决Angular这个简单问题的东西。 所有的答案都是相对于导航栏时，正在进行比较是针对位置path。
我使用list和ngRepeat构build了一个dynamic表。 当我点击一行，我试图分配这一行一个css类，选中，以突出显示事实，该行已被用户选中，并删除以前突出显示的行select。
我错过了被选中的行和CSS类的分配之间绑定的方法。
我应用在每一row （ ul ） ng-click="setSelected()"但我错过了应用这些改变的function内部的逻辑。
我的代码 – Plunk
我的代码：
var webApp = angular.module('webApp', []); //controllers webApp.controller ('VotesCtrl', function ($scope, Votes) { $scope.votes = Votes; $scope.statuses = ["Approved","Pending","Trash","Spam"]; $scope.setSelected = function() { console.log("show"); } }); //services webApp.factory('Votes', [function() { //temporary repository till integration with DB this will be translated into restful get query var votes = [ { id: '1', created: 1381583344653, updated: '222212', ratingID: '3', rate: 5, ip: '198.168.0.0', status: 'Pending', }, { id: '111', created: 1381583344653, updated: '222212', ratingID: '4', rate: 5, ip: '198.168.0.1', status: 'Spam' }, { id: '2', created: 1382387322693, updated: '222212', ratingID: '3', rate: 1, ip: '198.168.0.2', status: 'Approved' }, { id: '4', created: 1382387322693, updated: '222212', ratingID: '3', rate: 1, ip: '198.168.0.3', status: 'Spam' } ]; return votes; }]);
我的HTML：
<body ng-controller='VotesCtrl'> <div> <ul> <li class="created"> <a>CREATED</a> </li> <li class="ip"> <b>IP ADDRESS</b> </li> <li class="status"> <b>STATUS</b> </li> </ul> <ul ng-repeat="vote in votes" ng-click="setSelected()"> <li class="created"> {{vote.created|date}} </li> <li class="ip"> {{vote.ip}} </li> <li class="status"> {{vote.status}} </li> </ul> </div> </body>
我的CSS（只有选定的类）：
.selected { background-color: red; }
每一行都有一个ID。 所有你需要做的就是把这个ID发送到函数setSelected() ，存储它（例如在$scope.idSelectedVote中），然后检查每一行是否与当前select的ID相同。 这是一个解决scheme（如果需要，请参阅ngClass 的文档 ）：
$scope.idSelectedVote = null; $scope.setSelected = function (idSelectedVote) { $scope.idSelectedVote = idSelectedVote; };
<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}"> ... </ul>
Plunker
你可能想让LI而不是UL有背景色：
.selected li { background-color: red; }
那么你想要有一个dynamic类的UL：
<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">
现在你需要更新$ scope.selected单击行时：
$scope.setSelected = function() { console.log("show", arguments, this); this.selected = 'selected'; }
然后取消select之前突出显示的行：
$scope.setSelected = function() { // console.log("show", arguments, this); if ($scope.lastSelected) { $scope.lastSelected.selected = ''; } this.selected = 'selected'; $scope.lastSelected = this; }
工作scheme：
我需要类似的东西，能够点击一组图标来表示select，或基于文本的select，并且用所表示的值更新模型（双向绑定），以及指示哪个被视觉select。 我为它创build了一个AngularJS指令 ，因为它需要足够的灵活性来处理任何被点击的HTML元素来指示select。
<ul ng-repeat="vote in votes" ...> <li data-choice="selected" data-value="vote.id">...</li> </ul>
解决scheme： http : //jsfiddle.net/brandonmilleraz/5fr9V/
