本人在做一个后台系统时,需要点击 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 的方式不行)
欧阳克2016-11-12 15:19:09
这几天做了个小型系统的项目,在项目中 加载 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'); }); } }; });