gpt4 book ai didi

angularjs - 如何在 ngRepeat 中突出显示选定的行?

转载 作者:行者123 更新时间:2023-12-03 05:50:59 25 4
gpt4 key购买 nike

我找不到可以帮助我解决这个简单问题的东西在 Angular 。比较时所有答案都与导航栏相关正在针对位置路径进行制作。

我使用 list 和 ngRepeat 构建了一个动态表。当我单击一行时,我尝试为该行分配一个 css 类(selected),以突出显示该行已被用户选择的事实,并从先前突出显示的行中删除 .selected

我缺少在所选行和 css 类分配之间进行绑定(bind)的方法。

我应用到每个 (ul) ng-click="setSelected()"但我缺少 function 内部应用更改的逻辑。

My Code - 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 中),然后检查每一行是否所选 ID 与当前 ID 相同。这是一个解决方案(如果需要,请参阅 the documentationngClass):

$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

关于angularjs - 如何在 ngRepeat 中突出显示选定的行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19331779/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com