chọn tất cả các hộp kiểm có góc cạnh JS

Question

Tôi đang cố gắng chọn tất cả các hộp kiểm với một hộp kiểm duy nhất. Nhưng làm thế nào để làm điều đó?

Đây là HTML của tôi:

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

tôi có thể tạo một hộp kiểm thêm để selecet và bỏ chọn tất cả các hộp kiểm.

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

Tôi cố gắng này quá, nhưng không ai trong số họ làm việc cho tôi :(

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

Answer 1

Bạn đang bỏ lỡ div container với ng-controller và ng-app và angular.module.

user.select = $scope.selectAll là biến thể chính xác.

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

Answer 2

Đây là một JSFiddle bạn có thể sử dụng ng-checked với một biến vào nó như user.checked (hoặc sử dụng số user.select như bạn muốn)

<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

sử dụng đơn giản đoạn mã sau

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

Hãy thử thiết lập các hộp kiểm tra đối với mỗi người dùng phải được kiểm tra khi vào hộp kiểm đầu là đã chọn:

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