javascript - ngclass 条件简单列表？

Question

好的，这是列表:

<ul>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>
<li ng-click="menuclick()" ng-class="testclass">test</li>

这是我的 Controller :

.controller('editcontroller', function ($scope) {
$scope.activemenufirst = 'activemenu';
$scope.menuclick = function menuclick() {
    event.preventDefault();
    $scope.activemenufirst = ' ';
    alert('test');

};

});

我如何在点击 li 链接时在 li 链接上应用一个事件类并将其从所有其他 li 中删除？ jsfiddle

Answer 1

您可以只使用范围变量来跟踪单击的元素。然后在你的 ng-class 中你可以检查当前元素是否是被点击的元素:

HTML

<div ng-app="myApp">
    <div ng-controller="editController">
        <ul>
            <li ng-click="menuclick(1)" ng-class="{active: clickedId === 1}">test</li>
            <li ng-click="menuclick(2)" ng-class="{active: clickedId === 2}">test</li>
            <li ng-click="menuclick(3)" ng-class="{active: clickedId === 3}">test</li>
            <li ng-click="menuclick(4)" ng-class="{active: clickedId === 4}">test</li>
        </ul>
    </div>
</div>

Js

angular.module('myApp', [])
    .controller('editController', function ($scope) {
        $scope.menuclick = function menuclick(id) {
            $scope.clickedId = id;

        };

    });

jsFiddle:http://jsfiddle.net/6B2ga/