每个点击项目的“ng-class”

时间:2016-04-27 10:03:22

标签: javascript angularjs

我需要在已选择<li>上添加一个类,就像我在演示中所示,但如果我点击另一个<li>,则不希望删除它。

请帮忙

<div ng-app="myApp">
    <ul ng-controller="myCtrl">
        <li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': model.selected==item}" ng-click="model.selected=item">{{ item.name }}</li>
    </ul>
</div>

JS

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope) {

    $scope.model = {
        selected: null,
        items : [
            {name: "Apple"}, 
            {name: "Banana"}, 
            {name: "California"}
         ]
    };
})

demo

1 个答案:

答案 0 :(得分:2)

只需像这样添加

<div ng-app="myApp">
    <ul ng-controller="myCtrl">
        <li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': selected==$index}" ng-click="selected=$index">{{ item.name }}</li>
    </ul>
</div>