angularjs – 如何突出显示ngRepeat中的一个选定的行?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何突出显示ngRepeat中的一个选定的行?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我找不到可以帮助我解决这个简单问题的东西
在Angular。所有的答案都与导航栏相关的比较
是针对定位路径。

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

我缺少绑定在被选择的行和css类分配之间的方法

我应用于每一行(ul)ng-click =“setSelected()”
但我缺少的函数内的逻辑来应用更改。

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',ratingID: '4',ip: '198.168.0.1',status: 'Spam'    

        },{
            id: '2',created: 1382387322693,rate: 1,ip: '198.168.0.2',status: 'Approved'

        },{

            id: '4',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相同。这里有一个解决方案(如果需要,见ngClass的 the documentation):
$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相关文章