StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I get angular.js checkboxes with select/unselect all functionality and indeterminate values?
text
Body
copied!<p>I am looking for something exactly like <a href="http://jsfiddle.net/98BMK/">these</a> (tri-state checkboxes with "parents"). But using that solution wouldn't be elegant, as I do not depend on jQuery right now, and I would need to call $scope.$apply to get the model to recognize the automatically (un)checked checkboxed jQuery clicked.</p> <p><a href="https://github.com/angular/angular.js/issues/1411">Here's a bug for angular.js</a> that requests ng-indeterminate-value implemented. But that still wouldn't give me the synchronization to all the children, which is something I don't think should be a part of my controller.</p> <p>What I am looking for would be something like this:</p> <ul> <li>A "ng-children-model" directive with syntax like: <code><input type="checkbox" ng-children-model="child.isSelected for child in listelements"></code>. The list of booleans would be computed, and if 0 selected -> checkbox false. If all selected -> checkbox true. Else -> checkbox indeterminate.</li> <li>In my controller, I would have something like this: <code>$scope.listelements = [{isSelected: true, desc: "Donkey"},{isSelected: false, desc: "Horse"}]</code></li> <li>The checkboxes would be made as usual with <code><tr ng-repeat="elem in listelements"><td><input type="checkbox" ng-model="elem.isSelected"></td><td>{{elem.desc}}</td></tr></code>.</li> <li>As I understand it, the browser will determine which state a clicked indeterminate checkbox goes into.</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload