问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

angularjs如何实现点击li添加class，再次点击removeclass,且不相互影响

头像
jersey
    509154446
    <!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.min.js"></script>
    <script>
    var m1 = angular.module('myapp',[]);
        m1.controller('Aaa',function($scope){
            $scope.colors = [{
                'id':'1',
                'name':'red'
            },{
                'id':'2',
                'name':'green'
            },{
                'id':'3',
                'name':'blue'
            }];
        });
    </script>
</head>
<body>
    <div ng-controller="Aaa">
        <ul>
            <li ng-repeat="color in colors">{{color.name}}</li>
        </ul>
    </div>
</body>
</html>

    需要用到id对应起来吗？

    angularjs
    阅读 29.6k
    3 个回答
    得票最新
    头像
    zhoulijun
      2261
      ✓ 已被采纳

      不用楼上那么复杂。

      <ul>
    <li ng-class="{red : color.active}" ng-click="color.active = !color.active" ng-repeat="color in Texture">{{color.value}}</li>
</ul>
      头像
      Treri
        711138

        题主应该使用angular的directive来实现这个需求.
        结果: http://output.jsbin.com/rolobakaya

        javascriptm1.directive('toggleClass', function(){
    return {
        restrict: 'A',
        scope: {
            toggleClass: '@'
        },
        link: function($scope, $element){
            $element.on('click', function(){
                $element.toggleClass($scope.toggleClass);
            });
        }
    };
});

        html<li toggle-class="classname"></li>
        头像
        leozdgao
          4k1512

          我的思路是：

          <li ng-class="{active: currentId == color.id}" ng-repeat="color in colors">{{color.name}}</li>

          然后定义一个ng-click并在里面修改$scope.currentId

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏