简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angualrJs 重置 表格 的 ng-class 不起作用
高洛峰
高洛峰 2016-11-12 15:18:43
0
1
842

本人在做一个后台系统时，需要点击 td 时做些操作，如给 td 添加class，页面上有个按钮要对表格进行重置，即去掉 td 上的class。代码如下：

html:

    <!DOCTYPE html>
        <html 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">
            <div>
                <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>
            </div>
        </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 的方式不行)


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

Antworte allen(1)
学霸
学霸2016-11-12 15:19:09 1 Etage

这几天做了个小型系统的项目，在项目中 加载 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');
            });
        }
    };
});


Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！