list - angularjs を使用して複数のリスト項目を選択する

Question

順序付けられていないリストの要素から特定のリスト項目を選択しようとしています。背景を変更して表示する必要があるので、選択した状態で表示する必要があります。

要素$index内で使用しようとしていたのと同じように未定義のものを使用しようとしていました。<li>

angularjsチェックボックスやjQueryを使用せずに、内からこれを達成できますか?

Answer 1

それはあなたの特定のニーズに依存しますが、選択の結果をアイテムに直接書き込むことができるかもしれません

<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/

私はより一貫性のある前者を好みます。