如何突出ngRepeat选定的行？ [英] How to highlight a selected row in ngRepeat?
问题描述
我找不到东西，这将帮助我解决这个简单的问题
在角。所有的答案是相关的导航栏的时候比较
正在取得对抗位置路径。
我已经建立了使用列表和 ngRepeat 动态表格。当我点击一排，我试图分配此行CSS类，选择要强调的是，该行已经被用户选择，并删除 .selected 从previously突出显示的行。
我失踪到被选择的行和CSS类分配之间的绑定方法。
我申请上的每个行（ UL ） NG-点击=的setSelected（ ）
但我错过了函数来应用更改内部的逻辑。
我的code：
VAR的WebApp = angular.module（'web应用'，[]）;//控制器
webApp.controller（'VotesCtrl'，函数（$范围内，票数）{
$ scope.votes =票;
$ scope.statuses = [批准，待定，回收站，垃圾邮件]; $ scope.setSelected =功能（）{
的console.log（秀）; }
}）;//服务
webApp.factory（'投票'，[功能（）{ //临时存储库，直到与DB这种集成将被翻译成宁静的GET查询
VAR票= [
{
编号：'1'，
创建：1381583344653，
更新：'222212'，
ratingID：'3'，
速度：5，
IP：198.168.0.0，
状态：待定，
}，
{
ID：'111'，
创建：1381583344653，
更新：'222212'，
ratingID：'4'，
速度：5，
IP：198.168.0.1，
状态：垃圾邮件 }，
{
ID：'2'，
创建：1382387322693，
更新：'222212'，
ratingID：'3'，
速度：1，
IP：198.168.0.2，
状态：批准 }，
{ ID：'4'，
创建：1382387322693，
更新：'222212'，
ratingID：'3'，
速度：1，
IP：198.168.0.3，
状态：垃圾邮件
}
]; 返回票;
}]）;
我的HTML：
＆LT;机身NG控制器='VotesCtrl'＆GT;
＆LT; DIV＆GT;
＆LT; UL＆GT;
＆LT;李班=创建＆GT;
＆LT; A＆GT;制作而成LT; / A＆GT;
＆LT; /李＆GT;
＆LT;李班=IP＆GT;
＆LT; B＆GT; IP地址＆LT; / B＆GT;
＆LT; /李＆GT;
＆LT;李班=状态＆GT;
＆LT; B＆GT;状态和LT; / B＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; UL NG重复=投票表决NG点击=的setSelected（）＆GT;
＆LT;李班=创建＆GT;
{{vote.created |日期}}
＆LT; /李＆GT;
＆LT;李班=IP＆GT;
{{vote.ip}}
＆LT; /李＆GT;
＆LT;李班=状态＆GT;
{{vote.status}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
我的CSS（仅选定类）：
.selected {
背景色：红色;
}
每一行都有一个ID。所有你需要做的就是给这个ID发送给函数的setSelected（），它（存储在 $ scope.idSelectedVote 例如），然后检查每一行如果选择的ID是一样的当前。这里是一个解决方案（请参见为 ngClass >，如果需要的话）：
$ scope.idSelectedVote = NULL;
$ scope.setSelected =功能（idSelectedVote）{
$ scope.idSelectedVote = idSelectedVote;
};
＆LT; UL NG重复= NG点击=票中票的setSelected（vote.id）NG级={选择：vote.id === idSelectedVote}＆GT;
...
＆LT; / UL＆GT;
<大骨节病> Plunker
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屋！
