CODEWITHSUNDEEP
javascriptangularjscheckbox
forgottofly
forgottofly

Reputation: 2719

select all checkboxes inside ng-repeat

Am having a list of check boxes in ng-repeat as:

  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="selected[item.id]"><i></i>
      </label>
</div>

I would like to select all checkboxes on click of a single check box that is outside the ng-repeat.

   <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">

I tried the code in controller but its not working. 

   $scope.checkAll=()=>{
                if ($scope.selectedAll) {
                    $scope.selectedAll = true;
                } else {
                    $scope.selectedAll = false;
                }
                angular.forEach($scope.employees,function (selected) {
                    selected[selected.id] = $scope.selectedAll;
                });
            }

Upvotes: 1

Views: 12481

Answers (6)

xiaoshier
xiaoshier

Reputation: 1

you can toggle checkbox and get the value like this.By the way use linq.js.

<dl ng-controller="selectCtrl">
  <dt>
    <input type="checkbox" ng-model="selectAll" ng-change="toggleSelect('all')"/> select all
  </dt>
  <dd ng-repeat="x in list">
    <input type="checkbox" ng-model="select[$index]" ng-change="toggleSelect()" ng-true-value="{{x.id}}" ng-false-value="" />{{x.name}}
  </dd>
</dl>

var app = angular.module('app', []);
app.controller('selectCtrl', function ($scope) {
  $scope.selectAll    = false;
  $scope.select       = [];
  $scope.toggleSelect = function (tag) {

    if (tag == 'all') {
      if ($scope.selectAll) {
        $scope.select = $.Enumerable.From($scope.list).Select("$.id").ToArray();
      } else {
        $scope.select = []
      }
    } else {
      var items        = $.Enumerable.From($scope.select).Where('$').ToArray();
      $scope.select    = $.Enumerable.From($scope.list).Select(function (x) {
        if (items.indexOf(x.name) > -1) {
          return x.name;
        }
        return '';
      }).ToArray();
      $scope.selectAll = !$.Enumerable.From($scope.select).Any('!$');

    }
  };
  $scope.checkSelect  = function () {
    return $.Enumerable.From($scope.select).Any('$');
  };
  $scope.list         =
    [
      {id: 1, name: "checkbox1"},
      {id: 2, name: "checkbox2"},
      {id: 3, name: "checkbox3"},
      {id: 4, name: "checkbox4"}
    ];

});

Upvotes: 0

New Dev
New Dev

Reputation: 49590

The other answers here indeed make all the checkboxes "selected", but I think the idea is to make the underlying model also change, which those answers fail to do.

This is because Angular would not change the model when ng-checked changes. Instead, the right way to "select all" is to change the models - and the View just follows.

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

And in the controller, simply set all the items to be true in selected:

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

plunker

The ViewModel "drives" the View (with the exception of the bi-directional directives, like ng-model, that allows the View to change the ViewModel, typically based on user interaction), so whenever you want to change something, start by asking yourself "how would I want the ViewModel to look like", rather than, how the View should look. The View will follow the ViewModel.

Upvotes: 11

Vipin
Vipin

Reputation: 877

You can use "for in loop" to achieve this

HTML code:

 <button ng-click="checkAll()">check all</button>
  <div ng-repeat="item in items">
    <p>
      {{item.n}}:
      <input type="checkbox" ng-model="sel[item.id]">
    </p>
  </div>

Controller Code:

$scope.items = [
    {id: 123, name: "checkbox1"},
    {id: 234, name: "checkbox2"},
    {id: 456, name: "checkbox3"},
    {id: 567, name: "checkbox4"},
    ];

  $scope.sel = {};
  $scope.checkAll = function()
  {
    for(i in $scope.items)
      $scope.sel[$scope.items[i].id]=true;
  }

Please check the working demo in plunker

Upvotes: 1

K K
K K

Reputation: 18109

Using the demo by squiroid, You can also do this: Demo: http://jsfiddle.net/lotusgodkk/jh1svmr0/1/

HTML:

<div ng-controller="MyCtrl">
    <div ng-repeat="item in results">
        <label class="inlinelabel checkbox">
            <input type="checkbox" ng-model="item.id" ng-checked="toggle"><i>{{item.name}}</i>

        </label>
    </div>
    <label>Select All</label>
    <input type="checkbox" data-ng-model="selectedAll" ng-click="toggle=!toggle">
</div>

JS:

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.toggle = false;
    $scope.results = [{
        'id': '1',
            'name': 'rachit'
    }, {
        'id': '2',
            'name': 'rachit1'
    }, {
        'id': '3',
            'name': 'rachit2'
    }    
    ];
}

Upvotes: 0

squiroid
squiroid

Reputation: 14037

It's better to use ng-checked

Small working demo :)

<div ng-controller="MyCtrl">
  <div ng-repeat="item in results">
      <label class="inlinelabel checkbox">
        <input type="checkbox" ng-model="item.id" ng-checked="checkall"><i>{{item.name}}</i>
      </label>
</div>
      <label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">
</div>

function MyCtrl($scope) {
    $scope.checkall=false;
    $scope.results=[
        {'id':'1','name':'rachit'},
        {'id':'2','name':'rachit1'},
        {'id':'3','name':'rachit2'}    

    ];
$scope.checkAll=function(){
                if ($scope.selectedAll) {
                    $scope.checkall = true;
                } else {
                    $scope.checkall = false;
                }
                 }
}

Small demo here:) Fiddle

Upvotes: -1

ch271828n
ch271828n

Reputation: 17633

Er, is it wrong with the if code? It does nothing if you write that. Try below.

if (!$scope.selectedAll) {
    $scope.selectedAll = true;
} else {
    $scope.selectedAll = false; 
}

Upvotes: 0

Related Questions