Check All checkbox function inside a modal

Question

If user clicks 'add data' a modal opens, I have individual checkboxes for data1,data2,data3,data4. I also have a check all checkbox. If user clicks this, it should be able to select all above 4, if clicks again, it should deselect all. Also, once selected, the value of 'Select All' should change to 'Deselect All'

Code:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">

        <div class="modal-body">
            <label><input type="checkbox" ng-model="checkboxModel.value1"> Data1</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value2"> Data2</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value3"> Data3</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value4"> Data4</label><br/>
            <label><input type="checkbox" ng-model="checkboxModel.value5">Select All</label><br/>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Add data</button>
</div>

Can someone let me know how to achieve this. I saw a lot of posts online but each had ng-repeat for the first 4 checkboxes. Mine is without using ng-repeat. Can someone please advise.

I have the following plunker: http://plnkr.co/edit/nSCGJzj1zG5SGO2N76L3?p=preview

Answer 1

I noticed that you were not binding to the items array. I fixed that by using the following markup:

   <div ng-repeat="item in items">
      <label>
        <input type="checkbox" ng-model="item.Selected">{{item.name}}</label>
      <br/>
    </div>
    <label>
      <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()">Select All</label>
    <br/>

After that, I had to change the structure of the items property to become an object for later binding:

$scope.items = [{
name: 'item 1'
}, {
name: 'item 2'
}, {
name: 'item 3'
}, ];

To be able to update all the other checkboxes, I resorted to the following code:

$scope.checkAll = function() {

if ($scope.selectedAll) {
  $scope.selectedAll = true;
} else {
  $scope.selectedAll = false;
}
angular.forEach($scope.items, function(item) {
  item.Selected = $scope.selectedAll;
});

}

Please, refer to this plunker example for the full working solution.

UPDATE

Answer 2

Use the example here: https://docs.angularjs.org/api/ng/directive/ngChecked#! basically the trick is to add to all "slave" check boxes

ng-checked="checkboxModel.value5"

Answer 3

Well, first the explanation:

1. To select/deselect all the checkboxes, you can simply loop over the elements and setting all the checkbox to true/false.

2. To select/deselect this checkbox programatically, you can use Array.prototype.every() method, which returns if all checkboxes are selected or not, if all elements are selected that option will be/keep also selected, otherwise, it will be/keep deselected.

3. To get all the selected items when you close the modal you could use the Array.prototype.filter() method to return only the selected checkboxes.

Here's a snippet working:

(function() {
  "use strict";
  angular
    .module('ui.bootstrap.demo', [
      'ngAnimate',
      'ui.bootstrap'
    ])
    .controller('ModalDemoCtrl', ModalDemoCtrl)
    .controller('ModalInstanceCtrl', ModalInstanceCtrl);

  function ModalDemoCtrl($scope, $uibModal, $log) {
    $scope.animationsEnabled = true;

    $scope.open = function(size) {
      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
          items: function() {
            return $scope.items;
          }
        }
      });

      modalInstance.result.then(function(selectedItems) {
        $scope.selected = selectedItems;
      }, function() {
        $log.info('Modal dismissed at: ', new Date());
      });
    }

    $scope.toggleAnimation = function() {
      $scope.animationsEnabled = !$scope.animationsEnabled;
    }
  }

  // Please note that $uibModalInstance represents a modal window (instance) dependency.
  // It is not the same as the $uibModal service used above.

  function ModalInstanceCtrl($scope, $uibModalInstance, items) {
    $scope.items = [];

    function loadData() {
      var arr = [];
      for (var i = 1; i <= 5; i++) {
        arr.push({
          "name": "Item " + i
        });
      }
      return arr;
    }

    $scope.items = loadData();

    $scope.check = function() {
      $scope.selectedAll = $scope.items.every(function(value) {
        return value.Selected;
      });
    }

    $scope.selectAll = function() {
      $scope.items.forEach(function(item) {
        item.Selected = $scope.selectedAll;
      });
    }

    function getChecked() {
      return $scope.items.filter(function(value) {
        return value.Selected;
      });
    }

    $scope.ok = function() {
      $uibModalInstance.close(getChecked());
    }

    $scope.cancel = function() {
      $uibModalInstance.dismiss('cancel');
    }
  }
})();

.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}

<!DOCTYPE HTML>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-body">
      <div class="checkbox" ng-repeat="item in items">
        <label>
          <input type="checkbox" ng-model="item.Selected" ng-change="check()"> {{item.name}}
        </label>
        <br/>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"> Select All
        </label>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
  </script>

  <button type="button" class="btn btn-default" ng-click="open()">Add data!</button>
</body>

</html>

If you want to see it in plunker, click here.

I hope it helps!!