如何在点击`li`元素时添加`active`类

Question

我是AngularJS的新手.我需要知道如何使用它来处理这种情况.

我有一个包含值的数组.我正在使用ng-repeat迭代数组,它工作正常.我的要求是如何向用户点击的第一个子节点添加一个class(active),单击的元素应该获取类并从其余元素中删除该类.ulactive active li

我在JQuery中很容易就像这样:

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

但是这里如何实现同样的目标呢？

我的代码:

JavaScript控制器

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>

现场演示

Answer 1

这个怎么样.将当前活动项存储在控制器中,如果是一个类,则应用一个类.

HTML

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

JS控制器

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

Plunker