搜尋

首頁  >  問答  >  主體

angular.js - angular 如何用指令給給清單動態進行class切換

代码

想要的效果是,為目前點擊的那個添加樣式,其他的清空。

天蓬老师天蓬老师2817 天前510

全部回覆(2)我來回復

  • 某草草

    某草草2017-05-15 17:04:38

    不要這麼麻煩了,咱們直接用ng-class吧,像這樣:

    修正:

    好吧,我錯了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in ulList" ng-class="{active: currentIndex === $index}" ng-click="handleActive($index)">{{ x.li }}</li>
        </ul>
        <script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('myCtrl', ['$scope', function($scope){
                $scope.handleActive = function(index){
                  $scope.currentIndex = index;
                };
                
                $scope.ulList = [
                    {
                        id: '1',
                        li: '01'
                    },{
                        id: '2',
                        li: '02'
                    },{
                        id: '3',
                        li: '03'
                    },{
                        id: '4',
                        li: '04'
                    }
                ];
            }]);
        </script>
    </body>
    </html>

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:04:38

    用屬性綁定的方式
    給 ulList 裡的每個元素加個 isSelected 屬性,當 Click 時更改 isSelected 的值
    HTML 中用 ng-class

    回覆
    0
  • 取消回覆