Как добавить класс `active` при щелчке элемента` li`

Question

Я довольно новичок в AngularJS. Мне нужно знать, как использовать этот сценарий, используя его.

У меня есть массив со значениями. Я использую ng-repeat для итерации массива, и он отлично работает. Мое требование, как добавить класс (active) для первого ребенка от ul и когда пользователь нажимает, нажатая элемент должен получить active класс и удалить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> 

Live Demo

Answer 1

Как насчет Thi s. Храните текущий активный элемент в контроллере и применяйте к нему класс, если он тот.

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