如何在自定义表中标记AngularJs中的所有复选框？

Question

我有这张桌子的角度，我发送她的数据，它显示它，加深了数据。我还添加了我想要的cheackbox输入，当我点击它时，他标记了所有的复选框，但他不能很好地工作。

这里是角的指令：

app.directive("tables", function(){ 
return { 
template: '<table class="table table-striped table-bordered table-hover">'+ 
    '<thead>'+ 
    '<tr>'+ 
     '<th>#</th>'+ 
     '<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll(values)" /></th>'+ 
     '<th ng-repeat="(key,label) in labels">'+ 
      '<a href="" ng-click="orderByField=key; reverseSort = !reverseSort">'+ 
      '{{ label }} '+ 
       '<span ng-show="orderByField == key" class="sortIcon">'+ 
        '<span ng-show="reverseSort">'+ 
         '<span class="glyphicon glyphicon-chevron-up"></span>'+ 
        '</span>'+ 
        '<span ng-show="!reverseSort">'+ 
         '<span class="glyphicon glyphicon-chevron-down"></span>'+ 
        '</span>'+ 
       '</span>'+ 
      '</a>'+ 
     '</th>'+ 
    '</tr>'+ 
'</thead>'+ 
'<tbody>'+ 
    '<tr ng-repeat="(what,items) in values | orderBy:orderByField:reverseSort | filter :searchInput " >'+ 
    '<td>{{ $index +1 }}</td>'+ 
    '<td> <input type="checkbox" ng-model="user.select" value="{{ items[fieldId] }}"></td>'+ 
    '<td ng-repeat="(key,item) in items" ng-if="item != items[fieldId] ">{{item}}</td>'+ 
    '</tr>'+ 
'</tbody>'+ 
'</table>', 
link: function($scope) { 

     $scope.checkAll = function(arraySelect) { 
     angular.forEach(arraySelect, function(user) { 
      user.select = $scope.selectAll; 
     }); 
    }; 

    } 
    } 
}); 

以下是完整的例子：jsFiddle

Answer 1

尝试这样。 我在指令中将values定义为scope。并从复选框中删除值。

Demo

app = angular.module("myApp",[]); 
 

 
app.controller('myCtrl', function($scope,$http){ 
 

 
\t $scope.customers = []; 
 
\t $scope.orderByField = "first_name"; 
 
\t $scope.reverseSort = false; 
 
\t $scope.pageTitle = "CUSTOMERS_TXT"; 
 
\t $scope.fieldId = "id"; 
 
\t 
 
\t $scope.values = [ 
 
         {first_name: "Oded", last_name: "Taizi", id: 1,select:false}, 
 
         {first_name: "Ploni", last_name: "Almoni", id: 2,select:false} 
 
         ]; 
 
\t 
 
\t $scope.labels = ["first_name","last_name"]; 
 
\t 
 
}); 
 

 
app.directive("tables", function(){ 
 
return { 
 
    scope:{ 
 
\t values:'=values' 
 
\t }, 
 
    template: '<table class="table table-striped table-bordered table-hover">'+ 
 
\t \t '<thead>'+ 
 
\t \t '<tr>'+ 
 
\t \t \t '<th>#</th>'+ 
 
\t  \t '<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll(selectAll)" /></th>'+ 
 
\t \t \t '<th ng-repeat="(key,label) in labels">'+ 
 
\t \t \t \t '<a href="" ng-click="orderByField=key; reverseSort = !reverseSort">'+ 
 
\t \t \t \t '{{ label }} '+ 
 
\t \t \t \t \t '<span ng-show="orderByField == key" class="sortIcon">'+ 
 
\t \t   \t \t '<span ng-show="reverseSort">'+ 
 
\t \t   \t \t \t '<span class="glyphicon glyphicon-chevron-up"></span>'+ 
 
\t \t   \t \t '</span>'+ 
 
\t \t   \t \t '<span ng-show="!reverseSort">'+ 
 
\t \t   \t \t \t '<span class="glyphicon glyphicon-chevron-down"></span>'+ 
 
\t \t   \t \t '</span>'+ 
 
\t \t   \t '</span>'+ 
 
\t \t   '</a>'+ 
 
\t \t \t '</th>'+ 
 
\t \t '</tr>'+ 
 
\t '</thead>'+ 
 
\t '<tbody>'+ 
 
\t '<tr ng-repeat="(what,items) in values | orderBy:orderByField:reverseSort | filter :searchInput " >'+ 
 
\t \t '<td>{{ $index +1 }}{{items}}</td>'+ 
 
\t \t '<td> <input type="checkbox" ng-model="items.select" ></td>'+ 
 
\t  '<td ng-repeat="(key,item) in items" ng-if="item != items[fieldId] ">{{item}}</td>'+ 
 
\t '</tr>'+ 
 
\t '</tbody>'+ 
 
\t '</table>', 
 
    link: function($scope) { 
 

 
      $scope.checkAll = function(selectAll) { 
 
      angular.forEach($scope.values, function(user) { 
 
      user.select = selectAll; 
 
      }); 
 
     }; 
 

 
     } 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div class="panel panel-default" ng-controller="myCtrl"> 
 
    <tables values="values"></tables> 
 
    </div> 
 
</div>