搜尋

首頁  >  問答  >  主體

angular.js - angualrJs 重置 表格 的 ng-class 不起作用

先拜謝大神們過來看問題! ! !
先拜謝大神們過來看問題! ! !
先拜謝大神們過來看問題! ! !
本人在做一個後台系統時,需要點擊 td 時做些操作,如給 td 添加class,頁面上有個按鈕要對錶格進行重置,即去掉 td 上的class。程式碼如下:

html:


    <!DOCTYPE html>
        <html lang="en" ng-app="myApp">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <link rel="stylesheet" href="styles/bootstrap.min.css">
            <style>
            .selected {background: #139029;}
            </style>
        </head>
        <body ng-controller="myCtrl">
            <p class="container-fluid">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>item1</th>
                            <th>item2</th>
                            <th>item3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in [1,2,3]">
                            <td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
            </p>
        </body>
        <script src="lib/angular.1.5.5.min.js"></script>
        <script src="lib/jquery.2.2.2.min.js"></script>
        <script src="src/resetTable.js"></script>
        </html>

resetTable.js 部分:

    var myApp = angular.module('myApp',[]);
    myApp.controller('myCtrl',['$scope',function($scope){
    
        $scope.tableData = ['hello','blue','angular'];
    
        //$scope.selectClass = true; //设置 ture 可以 但只有第一次可以
    
        $scope.reset = function(){
            console.log('reset');
            $scope.selectClass = false;
        }
    
    }]).directive('myTd',function(){
        return {
            restrict : 'A',
            link : function(scope,elem){
                $(elem).on('click',function(){
                    if($(this).hasClass('selected')){
                        $(this).removeClass('selected')
                    }else{
                        $(this).addClass('selected');
                    }
                })
            }
        }
    });

點擊重置,$scope.selectClass=false 不起作用,求大神說明原因,有沒有遇到同樣問題的? ?

(後來我,透過 給按鈕定義個指令,在指令中將td的class清除,但感覺這種方式不太好,非常想知道為啥 $scope.selectClass = false 的方式不行)

漂亮男人漂亮男人2744 天前663

全部回覆(2)我來回復

  • 漂亮男人

    漂亮男人2017-05-15 17:09:51

    這幾天做了個小系統的項目,在項目中 加載 loading 效果是獲得啟發,實現了該效果,感覺比較理想,不知道是不是最優方案,也歡迎小伙伴們繼續補充。我的解決方法如下:

        myApp.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
    
        $scope.tableData = ['hello','blue','angular'];
    
        $scope.reset = function(){
            console.log('reset');
            $rootScope.$broadcast('resetTable');
        };
    
    }]).directive('myTd',function(){
        return {
            restrict : 'A',
            link : function(scope,elem){
                $(elem).on('click',function(){
                    if($(this).hasClass('active')){
                        $(this).removeClass('active');
                    }else{
                        $(this).addClass('active');
                    }
                });
    
                scope.$on('resetTable',function(){
                    $('.table td').removeClass('active');
                });
            }
        };
    });

    回覆
    0
  • 高洛峰

    高洛峰2017-05-15 17:09:51

    demo

    寫了個簡單的,沒什麼問題。

    回覆
    0
  • 取消回覆