从Angular中单击ng-click的所有子项中删除Class除了单击子项

Question

我有一个简单的列表项用ng-repeat解析:

<ul>
    <li ng-repeat="item in items" class="commonClass" ng-class="{'on': on_var}" ng-click="on_var=!on_var"> 
   {{item.name}} 
    <li>
</ul>

单击列表项将按预期添加类名"on".但是我想在你点击另一个列表项时立即删除所有其他'on'类,只将它添加到单击的那个类中.我来自jQuery背景,我是角色的新手.我想做的就是这样:

$("li.commanClass").click(function(){ 
    $("li.commonClass").removeClass('on');
    $(this).addClass('on');
})

我想知道实现这一结果的"角度方式"是什么

的jsfiddle

谢谢.

Answer 1

在angular中,您希望尽可能地将对象引用传递给子作用域.这样,您可以使用可以分支到多个级别的原型对象继承.

将范围视为一种范围model.在ng-repeat它的情况下,它为每个元素创建一个子范围.因此,如果父作用域包含模型,则它将作为对子作用域的引用传递.这些子作用域中的每一个都将保存对父作用域模型对象的引用.

这样你就可以做到:

<li ng-repeat="item in model.items" 
    ng-class="{'on': model.selected==item}" 
    ng-click="model.selected=item">{{ item.name }}</li> 

然后在控制器中:

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

尽量避免使用上面的回答功能.这些函数将被多次调用,并会增加不必要的额外开销.

有价值的帖子: 如果我有jQuery背景,那么"在AngularJS中思考"？

DEMO