如何突出显示ngRepeat中的选定行? [英] How to highlight a selected row in ngRepeat?
问题描述
我找不到可以帮助我解决这个简单问题的东西在角.比较时所有的答案都与导航栏相关正在根据位置路径制作.
我使用列表和 ngRepeat 构建了一个动态表.当我单击一行时，我试图为该行分配一个 css 类，已选择，以突出显示该行已被用户选择的事实，并从先前突出显示的行中删除 .selected.
我缺少在所选行和 css 类分配之间进行绑定的方法.
我申请了每个row (ul) ng-click="setSelected()"但是我缺少 function 内部的逻辑来应用更改.
我的代码:
var webApp = angular.module('webApp', []);//控制器webApp.controller('VotesCtrl', function ($scope, Votes) {$scope.votes = 票数；$scope.statuses = ["Approved","Pending","Trash","Spam"];$scope.setSelected = function() {控制台日志(显示")；}});//服务webApp.factory('投票', [function() {//临时存储库直到与数据库集成这将被转换为restful get查询投票数 = [{编号:'1'，已创建:1381583344653，更新:'222212'，评级 ID: '3',率:5，ip: '198.168.0.0',状态:'待定'，},{编号:'111'，已创建:1381583344653，更新:'222212'，评级 ID: '4',率:5，ip: '198.168.0.1',状态:'垃圾邮件'},{编号:'2'，已创建:1382387322693，更新:'222212'，评级 ID: '3',率:1，ip: '198.168.0.2',状态:已批准"},{编号:'4'，已创建:1382387322693，更新:'222212'，评级 ID: '3',率:1，ip: '198.168.0.3',状态:'垃圾邮件'}];返回选票；}]);我的 HTML:
<div><ul><li class="创建"><a>创建</a><b>IP地址</b> <b>状态</b> <ul ng-repeat="投票表决" ng-click="setSelected()"><li class="创建">{{vote.created|date}}{{vote.ip}} {{vote.status}} 我的 CSS(仅选定的类):
.selected {背景颜色:红色；}每一行都有一个 ID.您所要做的就是将此 ID 发送到函数 setSelected()，存储它(例如在 $scope.idSelectedVote 中)，然后检查每一行是否所选 ID 与当前 ID 相同.这是一个解决方案(请参阅 文档 ngClass，如果需要):
$scope.idSelectedVote = null;$scope.setSelected = 函数(idSelectedVote){$scope.idSelectedVote = idSelectedVote;};<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}">...I couldn't find something that will help me to solve this simple issue in Angular. All the answers are relevant for navigation bars when a comparison is being made against location path.
I've built a dynamic table using list and ngRepeat. When I click a row I'm trying to assign this row a css class, selected, to highlight the fact that this row has been selected by user, and remove the .selected from previously highlighted row.
I'm missing the method to bind between the row that been selected and the css class assignment.
I applied on each row (ul) ng-click="setSelected()"
But I'm missing the logic inside the function to apply the changes.
My code:
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;
}]);
My 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>
My CSS (Only selected class):
.selected {
background-color: red;
}
Each row has an ID. All you have to do is to send this ID to the function setSelected(), store it (in $scope.idSelectedVote for instance), and then check for each row if the selected ID is the same as the current one. Here is a solution (see the documentation for ngClass, if needed):
$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>
这篇关于如何突出显示ngRepeat中的选定行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
