- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
先拜谢大神们过来看问题！！！
先拜谢大神们过来看问题！！！
先拜谢大神们过来看问题！！！
本人在做一个后台系统时，需要点击 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 的方式不行)
漂亮男人2017-05-15 17:09:51
Saya telah mengusahakan projek sistem kecil dalam beberapa hari yang lalu. Saya terinspirasi oleh kesan pemuatan dalam projek. Saya menyedari kesan ini dan saya tidak tahu sama ada ia adalah penyelesaian terbaik dialu-alukan untuk terus menambah. Penyelesaian saya adalah seperti berikut:
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');
});
}
};
});