jquery - 如何在单击 `active` 元素时添加 `li` 类

Question

我对 AngularJS 还很陌生。我需要知道如何使用它来处理这种情况。

我有一个包含值的数组。我正在使用 ng-repeat 来迭代数组，它工作正常。我的要求是如何将类(active)添加到ul的first子级，并且每当用户单击时，被单击的元素应该获得active 类并从其余 li 元素中删除 active class。

我在 JQuery 中很容易做到这一点，例如:

$('li').addClass('active').siblings().removeClass('active')

但是这里如何实现同样的效果呢？

我的代码:

JavaScript Controller

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

myApp.controller("main", function ($scope) {

  $scope.items = [1,2,3,4,5];

  $scope.activate = function (item) {

    //how to active this item?

    //onload how to add class on first li?

  }

})

HTML

 <ul>

    <li ng-click="activate(item)" ng-repeat="item in items">
        {{item}}
    </li>

  </ul>

Live Demo

Answer 1

这个怎么样。将当前事件项目存储在 Controller 中，并为其应用一个类(如果是该类)。

HTML

<ul>
    <li 
        ng-click="activate(item)" 
        ng-repeat="item in items"
        ng-class="{'active': item == active}">{{item}}
    </li>
</ul>

JS Controller

$scope.items = [1,2,3,4,5];
$scope.active = items[0]; // for onload first element active
$scope.activate = function (item) {
    $scope.active = item;
}

Plunker