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-重複

回答

相關問題