CODEWITHSUNDEEP
angularjshtml
shaaa
shaaa

Reputation: 235

Select child checkbox on click of parent checkbox angularjs

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>

Upvotes: 0

Views: 1239

Answers (1)

Gaurav
Gaurav

Reputation: 1233

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>

Upvotes: 2

Related Questions