Question

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

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

这个怎么样？将当前活动项目存储在您的控制器中，并为其应用一个类（如果是的话）。

<强> 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

如何在点击`li`元素

1 个答案: