Question

使用AngularJS，我正在构建一个可以选择用户的页面。我有正确的代码用于选择/取消选择特定用户，但我不知道如何将其与另一个选择/取消选择所有用户的功能联系起来。

HTML：

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <label>Select All</label><br><input type="checkbox" ng-model="checked" ng-change="addremoveall(all, user.ID)">
    <button type="button" class="btn btn-primary" aria-label="Continue" style="width:168.5px; margin-left:5.25px;" ng-click="buildprint()">
      <span>Continue</span>
    </button>
    <table>
      <tr>
        <th></th>
        <th>User</th>
          .....
      </tr>

      <tr ng-repeat="user in users">
        <td><input type="checkbox" ng-model="checked" ng-change="addremoveuser(checked, user.ID)"><td>
        <td>{{user.Title}}</td>
          .....
      </tr>
    </table
</div>
</div>

JS：

var app = angular.module('myApp', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $http, $q){
    var array = [];

    $scope.addremoveuser = function (checked, id) {

            if (checked) {
                console.log("user selected", id);
                array.push(id)
                console.log("if test", array);
            }
            else {
                console.log("user unselected", id);
                var index = array.indexOf(id);
                array.splice(index);
                console.log("else test", array);
            }
    };

    $scope.addremoveall = function (all, id) {
            if (all) {
                console.log("all selected", id);
                array.push(id)
                console.log("if test", array);
            }
            else {
                console.log("all unselected", id);
                var index = array.indexOf(id);
                array.splice(index);
                console.log("else test", array);
            }
    };

});

如果选中此复选框，我如何使用addremoveall()将所有id推送到数组，并在取消选中该复选框时将其从数组中删除所有id ？如果检查了单个用户，则还需要考虑已经推入阵列的项目，然后选中all all。我可以将数组设置为null，然后在选中时添加所有`id's？

Answer 1

试试这个：

在你的DOM中使用ng-click insted of ng-change：

<label>Select All</label><br><input type="checkbox" ng-model="checked" ng-change="addremoveall(all, user.ID)">

作为

  <label>Select All</label><br><input type="checkbox" ng-click="toggleAllUser()" ng-model="checked">


  <tr ng-repeat="user in users">
    <td><input type="checkbox" ng-model="user.checked" ng-change="optionToggled()"><td>
    <td>{{user.Title}}</td>
      .....
  </tr>

你的js文件中的

确实改变了这样：

   $scope.addremoveuser = function (checked, id) {

            if (checked) {
                console.log("user selected", id);
                array.push(id)
                console.log("if test", array);
            }
            else {
                console.log("user unselected", id);
                var index = array.indexOf(id);
                array.splice(index);
                console.log("else test", array);
            }
    };

    $scope.addremoveall = function (all, id) {
            if (all) {
                console.log("all selected", id);
                array.push(id)
                console.log("if test", array);
            }
            else {
                console.log("all unselected", id);
                var index = array.indexOf(id);
                array.splice(index);
                console.log("else test", array);
            }
    };

到

  $scope.toggleAllUser = function() {
     var toggleStatus = !$scope.checked;
     angular.forEach($scope.users, function(itm){ itm.selected = toggleStatus; });

  }

  $scope.optionToggled = function(){
    $scope.isAllSelected = $scope.users.every(function(itm){ return itm.selected; })
  }
});

Answer 2

取消选中全选复选框后，您可以使用以下命令清除阵列。

array = [];

使用AngularJS，如何创建一个添加/删除数组中所有项目的复选框？

2 个答案: