установите все флажки с помощью angular JS

Я пытаюсь установить все флажки одним флажком. Но как это сделать?

Это мой 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>

Я создаю дополнительный флажок, чтобы установить и снять все флажки.

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

Я тоже пробовал, но у меня ни один из них не работает :(

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

checkbox html angularjs selectall
person Paili    schedule 17.03.2016    source источник
comment
может помочь вам stackoverflow.com/questions/35914431/   -  person Hadi J    schedule 17.03.2016
comment
Что-то происходит при вызове функции usersetting(user)? возможно, когда вы устанавливаете все флажки, что-то в этой функции отклоняет запрос и / или снимает флажок?   -  person Rob Scott    schedule 17.03.2016
comment
Этот вопрос похож на дубликат дубликата. Ссылка @hadiJZ должна служить вашей цели.   -  person Satej S    schedule 17.03.2016

Ответы (4)


arrow_upward
5
arrow_downward

Вам не хватает контейнерных div с ng-controller, ng-app и angular.module.

user.select = $scope.selectAll - правильный вариант.

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

person Gosha U.    schedule 17.03.2016
comment
у меня ни то, ни другое не работает: / Но спасибо! :) Может быть, есть другая проблема: / Я скопировал свой код в pasteBin ... app.js и HTML pastebin.com/7eJu14nd pastebin.com/tq10Gtjb Я просто удалил скрипт для apiomat - person Paili; 17.03.2016
comment
@Paili 1. OnLoad ссылается на несуществующую функцию. 2. Ваш js-код должен быть после angular.js в html (например, app.js). Рабочий код: pastebin.com/rMgmiRgW - person Gosha U.; 17.03.2016

arrow_upward
2
arrow_downward

Попробуйте установить флажки для каждого пользователя, который будет проверяться, когда установлен верхний флажок:

<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>
person Alison Muddle    schedule 05.12.2016

arrow_upward
1
arrow_downward

Вот JSFiddle, вы можете использовать ng-checked с переменной, например user.checked (или использовать user.select, как вы хотеть)

<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;
    });
  }
});
person michelem    schedule 17.03.2016

arrow_upward
0
arrow_downward

Просто используйте следующий код

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);
            });
               }
person Gurpinder    schedule 17.03.2016