input [checkbox] directive should support ng-indeterminate-value

[aziz]

checkboxes can have three states:

checked and unchecked states are supported through ng-true-value="{string}" and ng-false-value="{string}" but we don't have ng-indeterminate-value attribute.

I've made custom directive for now, but I believe it should be part of the built-in directive.

Angular.directive 'indeterminate', ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    if scope.$eval(attrs.indeterminate)
      element.prop("indeterminate", true)
    else
      element.prop("indeterminate", false)

[ysangkok]

This is also called tri-state checkboxes, I believe. I think it is a good feature, it is very usable for a select-all, unselect-all checkbox in the top of a listing with checkboxes. Since angular.js is designed for CRUD applications, I think this is definitely something that should be included.

[ysangkok]

How can I use the indeterminate state with ng-model instead of the ng-{true,false,indeterminate}-value triple? The model could associate the string "indeterminate" with this state.

(I also asked this on StackOverflow)

[tiagoroldao]

The state itself isn't supposed to include indeterminate, i think (as it is a boolean value, altering this behaviour would break compatibility - this is a HTML convention, not angular's). It is usually only a visual cue. So, something like ng-true-value/ng-false-value may not be a good idea. Although, something like a ng-checked (conditionally add the indeterminate attibute) would be good, and it doesn't seem hard - all it takes is adding indeterminate to the BOOLEAN_ATTR array, and it works straight away.

[tiagoroldao]

Upon testing, it isn't so simple - as the indeterminate attribute may overimpose the checked attribute, merely adding to the BOOLEAN_ATTR array introduces unpredictable behaviour... It is controllable by making indeterminate depend on a falsy checked value, but this seems something that should be handled by angular, rather that hacked/prevented by the user.

[ProLoser]

Why not make ng-indeterminate a simple boolean that ONLY controls the visual behavior (and not the value)? I would have said when ng-indeterminate is set to true, the model should be cleared (or nulled?) but even THAT is roughly the equivalent to false. So at the very least allowing an easy handle for the visual control if nothing else would be useful.

[kumarharsh]

@ProLoser: Actually, setting the value to null would be a good way of setting the checkbox to indeterminate. In some languages (C# comes to mind) there is a nullable datatype, even for boolean, which can have null value apart from true and false.

[ysangkok]

@kumarharsh but in JavaScript, null is not a boolean. Try "typeof null" yourself. And for laughs, try guessing the answer first :)

But maybe it's the best solution, I'm torn between convenience and pretend type safety.

[ProLoser]

I know we could get into typecasting semantics but in the mean time I think visual support is something no one can disagree with

[kumarharsh]

@ysangkok: I know null is not a boolean. I was just thinking aloud :)
And yes, I'd like to see "atleast" visual support for it being there.

For now, in one of my usecases, the ngModel starts off with a NaN value and the checkbox is indeterminate. When I start interacting with it, then it toggles between true and false.

[pkozlowski-opensource]

So, AFAIK standard HTML elements don't support this indeterminate state, right? Which means that it would have custom markup / CSS if I'm not mistaken. If this is the case I don't think it is the best fit for AngularJS core.

Is there any way to visually indicate indeterminate value with standard HTML input elements across all browsers?

[ysangkok]

@pawel: Yes, it is HTML. See
http://www.w3.org/TR/2011/WD-html5-20110113/the-input-element.html#dom-input-indeterminate

2013/8/10 Pawel Kozlowski notifications@github.com

So, AFAIK standard HTML elements don't support this indeterminate state,
right? Which means that it would have custom markup / CSS if I'm not
mistaken. If this is the case I don't think it is the best fit for
AngularJS core.

Is there any way to visually indicate indeterminate value with standard
HTML input elements across all browsers?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1411#issuecomment-22444496
.

[ProLoser]

His code sample needs to add a check for type =checkbox

[ProLoser]

Actually his code sample is wrong in a few ways. I can add a pr for the directive I wrote. I may have already added it to angular ui utils and just forgot