Can*_*hit 55 angularjs angularjs-ng-repeat
我找不到能帮助我解决Angular中这个简单问题的东西.当对位置路径进行比较时,所有答案都与导航栏相关.
我已经使用list和构建了一个动态表ngRepeat.当我单击一行时,我正在尝试为此行分配一个选定的css类,以突出显示用户已选择此行的事实,并.selected从之前突出显示的行中删除该行.
我错过了在所选行和css类赋值之间绑定的方法.
我应用于每个row(ul)ng-click="setSelected()"
但我错过了function应用更改内部的逻辑.
我的代码:
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;
}
Bla*_*ole 133
每行都有一个ID.您所要做的就是将此ID发送到函数setSelected(),存储它($scope.idSelectedVote例如),然后检查每行是否所选ID与当前ID相同.这里是一个解决方案(见文档的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>
您可能希望LI而不是UL具有背景颜色:
.selected li {
background-color: red;
}
那么你想拥有一个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';
}
然后取消选择之前突出显示的行:
$scope.setSelected = function() {
// console.log("show", arguments, this);
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
this.selected = 'selected';
$scope.lastSelected = this;
}
工作方案:
http://plnkr.co/edit/wq6nxc?p=preview
| 归档时间： |
|
| 查看次数： |
124383 次 |
| 最近记录： |