如何在单击“li”元素时添加“active”类

Question

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

我有一个包含值的数组。我正在使用ng-repeat 来迭代数组，它工作正常。我的要求是如何将一个类（active）添加到ul 的 first 子级，并且每当用户点击时，被点击的元素应该获得active 类并删除 strong> active class 来自其余的 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>

Live Demo

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