如果我选中所有复选框，则应自动选中全选复选框，反之亦然

Question

如果我选中了顶部的所有复选框，那么所有复选框都会被选中。但是当我单独检查每个复选框时，问题就出现了，应该自动检查全选复选框，反之亦然。 这是代码：

    <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };
      //for selecting and deleting checked items
      $scope.remove = function() {
        $scope.names = filterFilter($scope.names, function(x) {
          return !x.select;
        });
      };

    }]);
  </script>

</body>

</html>

这里是 plunker 的链接 http://plnkr.co/edit/LFShX3PTEITLaN7fSElX?p=preview

有人可以帮忙吗？

Answer 1

下面给出的代码可能会对您有所帮助。一旦您从最顶部的复选框中选中或取消选中任何所有复选框，然后您完成代码以选中所有。但是对于 ng-click 上的单个复选框，您调用一个函数但未实现此函数。这是您的更新代码。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <p>Click the table headers to change the sorting order:</p>

  <div ng-app="myApp" ng-controller="namesCtrl">
    <p>
      <button type="button" ng-click="remove($index)">Delete Selected</button>
    </p>

    <table border="1" width="100%">
      <tr>
        <th>
          <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
        </th>
        <th></th>
        <th>Sl no</th>
        <th ng-click="orderByMe('name')">Name</th>
        <th ng-click="orderByMe('country')">Country</th>
        <th>Delete</th>
      </tr>
      <tr ng-repeat="x in names | orderBy:myOrderBy">
        <td>
          <input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
        </td>
        <td>{{x.select}}</td>
        <td>{{$index+1}}</td>
        <td>{{x.name}}</td>
        <td>{{x.country}}</td>
        <td>
          <button type="button" ng-click="Delete(x)">Delete</button>
        </td>
      </tr>
    </table>

  </div>

  <script>
    angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
      $scope.names = [{
        name: 'Jani',
        country: 'Norway'
      }, {
        name: 'Carl',
        country: 'Sweden'
      }, {
        name: 'Margareth',
        country: 'England'
      }, {
        name: 'Hege',
        country: 'Norway'
      }, {
        name: 'Joe',
        country: 'Denmark'
      }, {
        name: 'Gustav',
        country: 'Sweden'
      }, {
        name: 'Birgit',
        country: 'Denmark'
      }, {
        name: 'Mary',
        country: 'England'
      }, {
        name: 'Kai',
        country: 'Norway'
      }];

      //for sorting the rows    
      $scope.orderByMe = function(x) {
          $scope.myOrderBy = x;
        }
        //single row deletion
      $scope.Delete = function(x) {
        $scope.names.splice($scope.names.indexOf(x), 1);
      };
      //selecting all checkboxes in the table
      $scope.checkAll = function() {
        angular.forEach($scope.names, function(x) {
          x.select = $scope.selectAll;
        });
      };

      $scope.xsetting = function(x) {
          $scope.selectAll = true;
          angular.forEach($scope.names, function(v, k) {
            if (!v.checked) {
              $scope.selectAll = false;
            }
          });
        }
        //for selecting and deleting checked items
      $scope.remove = function() {
        $scope.names = filterFilter($scope.names, function(x) {
          return !x.select;
        });
      };

    }]);
  </script>

</body>

</html>

这里是http://plnkr.co/edit/TmF4jFtRmFFKoYngSYpq?p=preview，它正在工作。

Answer 2

您可以在全选复选框上添加ng-checked，例如：

 ng-checked="allChecked()"

allChecked 是控制器中的一个函数，用于确定是否所有名称都已被选中。比如，

$scope.allChecked = function() {
  return $scope.names.filter(obj => obj.select).length === $scope.names.length
}

working example

EDIT：没有箭头功能，

$scope.allChecked = function() {
  var selectedNames = $scope.names.filter(function(obj) {
    return obj.select
  });
  return selectedNames.length === $scope.names.length
}