使用angularjs选择多个列表项

时间:2013-09-14 01:17:53

标签: list angularjs

我正在尝试从无序列表中的元素中选择特定的列表项。它应该显示为已选中,我需要通过更改某些背景来显示。

我尝试使用$index,因为我试图在<li>元素中使用它时未定义。

我可以在angularjs内完成此操作,而无需使用复选框或jQuery吗?

1 个答案:

答案 0 :(得分:8)

这取决于您的特殊需要,但也许您可以直接在项目中编写选择结果

<ul>
    <li ng-repeat="item in items" ng-class="{'selected':item.selected}">
        <a href="" ng-click="toggle(item)">{{item.text}}</a>
    </li>
</ul>

,其中

$scope.toggle = function (item) {
    item.selected = !item.selected;
};

在此处查看极简主义演示:http://jsfiddle.net/9qLm4/1/

或者您可以使用$index将您的选择存储到其他array中,如此

<ul>
    <li ng-repeat="item in items" ng-class="{'selected':selection.indexOf($index)!=-1}">
        <a href="" ng-click="toggle($index)">{{item}}</a>
    </li>
</ul>

,其中

$scope.selection = [];

$scope.toggle = function (idx) {
    var pos = $scope.selection.indexOf(idx);
    if (pos == -1) {
        $scope.selection.push(idx);
    } else {
        $scope.selection.splice(pos, 1);
    }
};

在此处查看极简主义演示:http://jsfiddle.net/j5T2y/2/

我偏爱前者,这更加一致。