seleziona tutte le caselle con JS angolare

Question

Sto provando a selezionare tutte le caselle con una sola casella di controllo. ma come farlo?

Questo è il mio HTML:

<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /> 

<!-- userlist --> 
    <!--<div id="scrollArea" ng-controller="ScrollController">--> 
    <table class="table"> 
     <tr> 
      <th>User ID</th> 
      <th>User Name</th> 
      <th>Select</th>  
    </tr> 
    <tr ng-repeat="user in users | filter:search"> 
     <td>{{user.id}}</td> 
     <td>{{user.name}}</td> 
     <td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select"></td> 
     <td><tt>{{user.select}}</tt><br/></td> 
    </tr> 
    </table> 

creo una casella di controllo in più per selecet e deselezionare tutte le caselle di controllo.

JS:

.controller('UsersCtrl', function($scope, $http){ 
    $http.get('users.json').then(function(usersResponse) { 
     $scope.users = usersResponse.data; 
    }); 

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

ho provato anche questo, ma nessuno di loro lavora per me :(

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

Answer 1

Si sono mancati i div contenitore con ng-controller e ng-app e angular.module.

user.select = $scope.selectAll è la variante corretta.

https://jsfiddle.net/0vb4gapj/1/

Answer 2

Ecco un JSFiddle è possibile utilizzare ng-checked con una variabile su di essa come user.checked (oppure utilizzare user.select come desiderato)

<div ng-app="app" ng-controller="dummy"> 
    <table> 
    <tr ng-repeat="user in users"> 
     <td>{{user.id}}</td> 
     <td>{{user.name}}</td> 
     <td> 
     <input type="checkbox" ng-click="usersetting(user)" ng-checked="user.checked" ng-model="user.select"> 
     </td> 
     <td><tt>{{user.select}}</tt> 
     <br/> 
     </td> 
    </tr> 
    </table> 
    <button ng-click="checkAll()">Check all</button> 
</div> 

JS:

var app = angular.module("app", []); 
app.controller('dummy', function($scope) { 
    $scope.users = [{ 
    id: 1, 
    name: "Hello", 
    select: 1 
    }, { 
    id: 2, 
    name: "World", 
    select: 1 
    }, ]; 
    $scope.checkAll = function() { 
    angular.forEach($scope.users, function(user) { 
     user.checked = 1; 
    }); 
    } 
}); 

Answer 3

uso semplice il seguente codice

HTML

<input type="checkbox" ng-model="checkboxes.checked" data-ng-click="checkAll()" class="select-all" value="" /> 

JS

$scope.checkAll = function() { 
       angular.forEach($scope.users, function(item) { 
       $scope.checkboxes.items[item._id] =  $scope.checkboxes.checked; 
       $scope.selection.push(item._id); 
      }); 
       } 

Answer 4

Provare a impostare le caselle selezionate contro ogni utente da controllare quando la casella di controllo superiore è controllato:

<input type="checkbox" ng-model="selectAll"/>  

<table class="table"> 
    <tr> 
     <th>User ID</th> 
     <th>User Name</th> 
     <th>Select</th>  
</tr> 
<tr ng-repeat="user in users | filter:search"> 
    <td>{{user.id}}</td> 
    <td>{{user.name}}</td> 
    <td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select" ng-checked="selectAll"></td> 
    <td><tt>{{user.select}}</tt><br/></td> 
</tr> 
</table>