angularjs纳克级表不行NG-重复

var myApp = angular.module('myApp',[]); 
 
myApp.controller('myCtrl',['$scope',function($scope){ 
 

 
    $scope.tableData = ['hello','blue','angular']; 
 

 
    //set ture ok but only first time 
 
    //设置 true 可以 但是 只有第一次可以 
 
    //$scope.selectClass = true; 
 

 

 
    $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'); 
 
       } 
 
      }) 
 
     } 
 
    } 
 
});

.selected {background: #139029;}

<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!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"> 
 
    <div 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> 
 
    </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>

我按一下按钮复位类不行，为什么呢？谁可以告诉我。非常感谢！！

来源

2016-09-28 user6892651

你不需要该指令（并且你不需要操纵DOM自己）。 ng-class本身就是一个内置的指令，可以做到这一点。

只要删除您myTd指令和你的元素改成这样：通过保留指令

<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>

来源

2016-09-28 09:24:48

你可能不明白我的意思，我想单击表格下面的按键，该表将有风情（“选中”）td全部删除 – user6892651

补充：我已经选择了td这个操作，标记了一些td被选中，这还没有被选中，这是一个必要条件 – user6892651

要怎么做才能达到你的要求，其实什么是从删除类selected你的表格行

要做到这一点，修改复位功能如下

$scope.reset = function(){  
    $('.selected').removeClass('selected'); 
}

该功能选择所有的类名selected的元素，并从这些元素中删除类

来源

2016-09-28 09:31:30 Nitheesh

“控制器”一般不允许操作dom，所以我没有认为这是理想的方式 – user6892651

其实在你的情况下你的指令'myTd'正在做一个DOM操作。所以你必须撤销DOM操作来重置网格。我们可以使用Controller来执行DOM操作 – Nitheesh

angularjs纳克级表不行NG-重复

回答

相关问题