Question

我想知道在选中父复选框时如何选择子复选框。在下面的plunkr中，表头中有父复选框，表体中有子复选框。在表头中单击父复选框时，我希望选择表体中的所有子复选框，并且当选择表体中的所有子复选框时，也应选择表头中的父复选框。这是plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview

String[]

Answer 1

你走了：

＆＃13;

angular.module('test', [])
  .controller('test', function($scope) {
    $scope.selectAll = false;
    $scope.itemSelecteds = {};
    $scope.dummyModel = {};
    $scope.items = [{
      id: '1',
      name: 'mit',
      catalog: 'Multiple',
      currentVersion: '1.2',
      newVersion: '1.3',
    }, {
      id: '2',
      name: 'mit',
      catalog: 'Multiple',
      currentVersion: '1.2',
      newVersion: '1.3',
    }, {
      id: '3',
      name: 'mit',
      catalog: 'Multiple',
      currentVersion: '1.2',
      newVersion: '1.3',
    }];

    $scope.selectAllItem = function() {

      // Delete the selection
      $scope.dummyModel = {};
      $scope.itemSelecteds = {};

      // If select all checkbox is checked, then mark all items as selected
      if ($scope.selectAll) {
        angular.forEach($scope.items, function(item) {
          this[item.id] = angular.copy(item);
          $scope.dummyModel[item.id] = true;
        }, $scope.itemSelecteds);
      }
    };

    $scope.selectItem = function(item) {
      // If checkbox is checked
      if ($scope.dummyModel[item.id]) {
        $scope.itemSelecteds[item.id] = item;
      } else {
        delete $scope.itemSelecteds[item.id];
      }

      // If all items are selected, mark selectAll as true
      $scope.selectAll = ((Object.keys($scope.itemSelecteds)).length === $scope.items.length);
    }

    $scope.update = function() {
      console.log($scope.itemSelecteds);
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="test" ng-controller="test">
  <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
    <thead style="border-bottom: 1px solid #AAA">
      <tr>

        <th style="width:50%">&nbsp;&nbsp;
          <input type='checkbox' ng-model='selectAll' ng-change='selectAllItem()' />&nbsp;&nbsp; catalog</th>
        <th style="width:25%">currentVersion</th>
        <th style="width:25%">new Version</th>
      </tr>
    </thead>
    <tbody style="color: #007db8;">
      <tr ng-repeat="item in items" ng-attr-id="item.id">
        <td style="width:50%">
          &nbsp;&nbsp;
          <input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)" />&nbsp;&nbsp;{{ item.catalog }}
        </td>
        <td style="width:25%">{{ item.currentVersion }}</td>
        <td style="width:25%">{{ item.newVersion }}</td>
      </tr>
    </tbody>
  </table>
  <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()">Update</button>
</body>

＆＃13;

单击父复选框angularjs选择子复选框

1 个答案: