Angularjs 从所有子类中删除类，但在ng上单击的子类除外单击角度

我有一个简单的列表项正在使用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>

我想知道达到这个结果的“角度方法”是什么

---

谢谢。

您可以在作用域中添加一个变量来维护所选项目，并在作用域中添加一个函数来切换变量

控制器：

app.controller('myCtrl', function($scope) {
    $scope.items = 
    [
        {name: "Apple"},
        {name: "Banana"},
        {name: "California"}
    ]

    $scope.selectItem = function( item ) {
        $scope.selectedItem = item;
    };
})

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

HTML:

{{item.name}

小提琴来到jsparks的ya，回答：

---

在angular中，您希望尽可能多地将对象引用传递给子作用域。通过这种方式，您可以使用原型对象继承，它可以向下分支到许多级别

将作用域视为

模型

。在

ng repeat

的情况下，它为每个元素创建一个子范围。因此，如果父作用域包含一个模型，它将作为子作用域的引用传递。每个子作用域都将包含对父作用域模型对象的引用

因此，您可以：

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

尽量避免使用上述答案中的函数。这些函数将被多次调用，并将增加不必要的额外开销

有价值的文章阅读：

---

我认为你应该参考整个项目的指令，而不是控制器

<div class="nav-item">
    <ul>
        <li active-me="on">Item 1</li>
        <li active-me="on">Item 2</li>
        <li active-me="on">Item 3</li>
        <li active-me="on">Item 4</li>
        <li active-me="on">Item 5</li>
    </ul>
</div>

---

谢谢提供的所有答案似乎都有效，但我最喜欢这个。

<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"}
         ]
    };

<div class="nav-item">
    <ul>
        <li active-me="on">Item 1</li>
        <li active-me="on">Item 2</li>
        <li active-me="on">Item 3</li>
        <li active-me="on">Item 4</li>
        <li active-me="on">Item 5</li>
    </ul>
</div>

angular.module('app').directive('activeMe', function(){
    return {
        restrict: 'A',
        scope: {
            activeMe: '@'
        },
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if (scope.activeMe !== undefined && scope.activeMe.trim().length > 0) {
                    element.parent().children().removeClass(scope.activeMe);
                    element.addClass(scope.activeMe);
                } else {
                    element.parent().children().removeClass('active');
                    element.addClass('active');
                }
            });
        }
    };
});