Javascript ng类条件简单列表？

好的，下面是列表：

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

}))

当单击li链接时，如何在其上应用活动类并将其从所有其他li链接中删除？

---

您可以使用范围变量来跟踪单击的项目。然后在ng类中，您可以检查当前元素是否为单击的元素：

HTML

jsFIDLE:

好吧，这是我的演示：

html:

---

如果您重复您的li in ng，html标记中会有一个“$index”

是否要按逻辑设置类？如果不是，您不需要在ng类中设置类，您应该只使用常规的HTML类属性

如果您不想手动（或通过ng重复）添加ID，可以这样做：

angular.module('myApp', [
])
    .controller('editcontroller', function ($scope) {
    $scope.menuItems = angular.element(document.querySelectorAll('.testclass'));
    $scope.menuclick = function menuclick(e) {
        angular.forEach($scope.menuItems, function(el){
            angular.element(el).removeClass('active');
        });
        angular.element(event.target).addClass('active');
    };

});

如果您最终通过ng repeat创建了

，您将能够传入一个可用于设置ID的索引属性

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

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

        };

    });

<div ng-app="myApp">
    <div ng-controller="editcontroller">
        <ul>
            <li ng-click="menuclick(1)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 1]">test</li>
            <li ng-click="menuclick(2)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 2]">test</li>
            <li ng-click="menuclick(3)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 3]">test</li>
            <li ng-click="menuclick(4)" ng-class="{true:'activemenufirst',false:'testclass'}[active === 4]">test</li>
        </ul>
    </div>
</div>

angular.module('myApp', [])
    .controller('editcontroller', function ($scope) {
    $scope.activemenufirst = 'red';
    $scope.menuclick = function menuclick(index) {
        event.preventDefault();
        $scope.activemenufirst = ' ';
        $scope.active = index;
    };
});

angular.module('myApp', [
])
    .controller('editcontroller', function ($scope) {
    $scope.menuItems = angular.element(document.querySelectorAll('.testclass'));
    $scope.menuclick = function menuclick(e) {
        angular.forEach($scope.menuItems, function(el){
            angular.element(el).removeClass('active');
        });
        angular.element(event.target).addClass('active');
    };

});