angular.js - angualrJs 重置 表格 的 ng-class 不起作用
漂亮男人
漂亮男人 2017-05-15 17:07:51
0
2
657

先拜谢大神们过来看问题!!!
先拜谢大神们过来看问题!!!
先拜谢大神们过来看问题!!!
本人在做一个后台系统时,需要点击 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 的方式不行)

漂亮男人
漂亮男人

répondre à tous(2)
漂亮男人

J'ai travaillé sur un petit projet système ces derniers jours. J'ai été inspiré par l'effet de chargement du projet et j'ai réalisé cet effet et je ne sais pas si c'est la meilleure solution. bienvenue pour continuer à ajouter. Ma solution est la suivante :

    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');
            });
        }
    };
});
小葫芦

démo

J'en ai écrit un simple, pas de problème.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal