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

发布时间：2020-12-17 08:57:26 所属栏目：安全来源：网络整理

导读：我找不到可以帮助我解决这个简单问题的东西在Angular。所有的答案都与导航栏相关的比较是针对定位路径。我已经建立了一个动态表使用列表和ngRepeat。当我单击一行我试图分配一个css类，选择，以突出显示该行已被用户选择的事实，并从先前突出显示的行中删

我找不到可以帮助我解决这个简单问题的东西
在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!