社群 學習 工具庫 休閒
搜尋
繁体中文
angular.js - angularjs如何實作點選li新增class，再點選removeclass,且不互相影響
世界只因有你
世界只因有你 2017-05-15 16:52:53
0
3
2520
<!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>
    <p ng-controller="Aaa">
        <ul>
            <li ng-repeat="color in colors">{{color.name}}</li>
        </ul>
    </p>
</body>
</html>

需要用到id對應嗎？

世界只因有你
世界只因有你

全部回覆(3)
给我你的怀抱
给我你的怀抱2017-05-15 16:54:53 3樓

不用樓上那麼複雜。 

<ul>
    <li ng-class="{red : color.active}" ng-click="color.active = !color.active" ng-repeat="color in Texture">{{color.value}}</li>
</ul>
點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-05-15 16:54:53 2樓

題主應該使用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>
點贊 +0
新增回覆
小葫芦
小葫芦2017-05-15 16:54:53 1樓

我的思路是：

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

然後定義一個ng-click并在里面修改$scope.currentId

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板