Select child checkbox on click of parent checkbox angularjs

Question

I would like to know how to select the child checkboxes when parent checkbox is selected. In the below plunkr i have parent checkbox in table head and child checkboxes in table body. On click of parent checkbox in table head i want all the child checkboxes in table body to be selected and when all the child checkboxes in table body are selected parent checkbox in table head also should be selected. Here is the plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview

html code-
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="script.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'/>&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>

Gaurav · Accepted Answer · 2017-03-15 15:30:14Z

Here you go:

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

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

Collectives™ on Stack Overflow

Select child checkbox on click of parent checkbox angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related