Angularjs 如何在ngRepeat中突出显示选定行？
我找不到能帮助我解决这个简单问题的方法 有棱角的。比较时，所有答案都与导航栏相关 正在根据位置路径创建 我使用list和Angularjs 如何在ngRepeat中突出显示选定行？,angularjs,angularjs-ng-repeat,Angularjs,Angularjs Ng Repeat,我找不到能帮助我解决这个简单问题的方法 有棱角的。比较时，所有答案都与导航栏相关 正在根据位置路径创建 我使用list和ngRepeat构建了一个动态表。当我单击一行时，我试图为该行分配一个css类selected，以突出显示该行已被用户选中的事实，并从先前突出显示的行中删除。selected 我缺少在选定的行和css类赋值之间绑定的方法 我在每个行应用了（ul）ng click=“setSelected（）” 但是我缺少函数中应用更改的逻辑 我的代码： var webApp = angula
ngRepeat。selected行应用了（ul
）ng click=“setSelected（）”
但是我缺少函数中应用更改的逻辑
我的代码：
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;
}]);
<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>
我的HTML:
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;
}]);
<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>
每行都有一个ID。您只需将此ID发送到函数setSelected（）
，将其存储（例如存储在$scope.idSelectedVote
中），然后检查每行所选ID是否与当前ID相同。以下是一个解决方案（如有需要，请参见ngClass
）：
$scope.idSelectedVote=null；
$scope.setSelected=函数（idSelectedVote）{
$scope.idSelectedVote=idSelectedVote；
};
...
您可能希望LI而不是UL具有背景色：
.selected li {
background-color: red;
}
然后，您需要为UL创建一个动态类：
<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">
然后取消选择先前高亮显示的行：
$scope.setSelected = function() {
// console.log("show", arguments, this);
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
this.selected = 'selected';
$scope.lastSelected = this;
}
工作解决方案：
我需要类似的功能，即单击一组图标以指示选择，或基于文本的选择，并使用表示的值更新模型（双向绑定），以及指示视觉选择的方式。我支持它，因为它需要足够的灵活性来处理被单击以指示选择的任何HTML元素
<ul ng-repeat="vote in votes" ...>
<li data-choice="selected" data-value="vote.id">...</li>
</ul>
解决方案：
这个解决方案比上一个好。有没有办法不用控制器就可以做到这一点？我正试图找到一个“最佳”的方式来做它的看法，但我没有运气。我试着做一些像。。。ng click=“idSelectedVote=vote”ng class=“{selected:vote.id===idSelectedVote}”但单击一行后，其他行仍保持选中状态。您的解决方案可以工作，但如果只存在一个视图解决方案就更好了。@Spencer有一个新的作用域与ngRepeat
创建的每个
关联；因此，在您的ngClick中，idSelectedVote
只修改本地范围，而不是与其他人共享的范围。两种解决方案：改用$parent.idSelectedVote
（脏的，真的！），或者在
祖先中使用对象（ng init=“selectedVote={id:null}”
），只修改它的一个属性，而不是整个对象（ng click=“selectedVote.id=vote.id”
）。无论如何，使用控制器总是一个更好的解决方案。自定义指令可能是将逻辑移到控制器之外的最佳方式，这取决于应用程序的复杂程度和作用域的拥挤程度。@nikkwong实际上，将逻辑放在控制器中通常是个好主意，除非你反复使用同一个，在这种情况下，指令是非常合适的。我点击了这个答案，因为我可以让它工作，但我不能让检查的一个。但是这里的代码和plunker中的代码之间有一些差异。上面的ng click缺少（this），您上面的类在属性周围有引号，但plunker没有。在我发布plunker链接后，我注意到它缺少引号，并且参数列表中的this
仅由console.log使用。但是，您可以传入所选行，也可以使用此行，但不应使用$scope，因为这是整个VoteCtrl:plnkr.co/edit/JoSUwA？p=previewPlease不要只链接到外部网站、博客等，即使您是作者-关于stackoverflow的好答案包含了文章本身所需的详细信息。