Question

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

Answer 1

每行都有一个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>

{{1}}

the documentation

Answer 2

您可能希望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

Answer 3

我需要类似的东西，能够点击一组图标来表示选择，或基于文本的选择，并使用所表示的值更新模型（双向绑定），并且还有一种方式指出哪个是肉眼选择的。我created an AngularJS directive因为它需要足够灵活，可以处理任何被点击的HTML元素以表示选择。

<ul ng-repeat="vote in votes" ...>
    <li data-choice="selected" data-value="vote.id">...</li>
</ul>

解决方案： http://jsfiddle.net/brandonmilleraz/5fr9V/

如何突出显示ng中的选定行？

3 个答案: