Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Feature: ngTrueValue should accept non-string values #1199

Closed
coli opened this issue Jul 25, 2012 · 60 comments
Closed

Feature: ngTrueValue should accept non-string values #1199

coli opened this issue Jul 25, 2012 · 60 comments

Comments

@coli
Copy link

coli commented Jul 25, 2012

For ng-model checkboxes, ngTrueValue only supports string. It should really just accept an angular expression and eval to get the value so it supports say a js object.

@btford
Copy link
Contributor

btford commented Aug 1, 2012

I'm not entirely sure of the purpose of ngTrueValue, except that it seems like a convenience directive for adding watches to a controller for one case. I suspect that if you want to set some model to a complex value, it might be cleaner to put a $scope.$watch on your checkbox's model and modify a model on the scope accordingly.

@coli, do you have a specific use case in mind? @IgorMinar, @mhevery, @vojtajina, what do you guys think?

@coli
Copy link
Author

coli commented Aug 1, 2012

Use case is fairly common actually:

I have a array of say category objects in say $scope.categories=[{id:5,name:"First"},...}

Then I have a selectedCategories array that contains a subset of those categories.

I want to show a checkbox for some categories(paging), and when you check or uncheck the checkbox, selectedCategories is changed.

I actually wrote a directive that will overwrite the default checkbox behavior to add support for the above. I can share the code if needed.

@coli
Copy link
Author

coli commented Aug 1, 2012

My usage ended up like this, keyField was needed to do object comparison as in my case, selected group object and group object could be slightly different initially (they came from 2 different backend API)

<ng-repeat="group in groups>
    <input type='checkbox' ng-model="selectedArray" ng-true-value="group" mi-checkbox="{keyField:'id'}">
</>

@jamiedgordon
Copy link

Heck, I have a far simpler use case that I was disappointed to discover doesn't work - I need an integer, rather than string!

@scyros
Copy link

scyros commented Sep 9, 2012

I'm using a template to render a checkbox control. In this case i cannot know the true value, that value depends on specific control information i want to render.

@adamsch1
Copy link

I too would prefer that ng-true-value be an expression. If your number of checkboxes is determined at run time you have to resort to scope methods with timeout wrappers.

@arselvam
Copy link

+1. Support expression in ng-true-value

@redbarmaley
Copy link

+1 Support integer in ng-true-value

@mogadget
Copy link

+1 for expression instead of string

@ilmotta
Copy link

ilmotta commented Feb 27, 2013

+1 Support expressions!

@brab
Copy link

brab commented Mar 4, 2013

+1 for expressions

@marcospassos
Copy link

+1 Support objects:

<div ng-repeat="group in groups">
    <input type='checkbox' ng-model="array[$index]" ng-true-value="group" />
</div>

@brab
Copy link

brab commented Mar 6, 2013

@coli would you mind sharing the directive you wrote? It would be a great help to me while this is issue is still being considered. Maybe in a gist?

@coli
Copy link
Author

coli commented Mar 7, 2013

@brab I wrote it at a previous job unfortunately, but basically, it's similar to the built in code for checkboxes, I copy/pasted into a custom directive and added expression support. (+ a ugly hack to remove the the built-in one)

@lkende
Copy link

lkende commented Mar 28, 2013

Expressions would be great! However, even javascript truth testing for integers would be expected. I use $resource to populate an object that returns integer values (1 or 0) from a database boolean. These are then attached to the $scope for which the ng-model on the input is bound. Was really surprised to find out setting ng-true-value="1" would not recognize integer 1 as true and check the box. Will look into other methods mentioned in the meantime.

@daspecster
Copy link
Contributor

+1

@jan-j
Copy link

jan-j commented Apr 21, 2013

+1 for expressions

@NiltonCruz
Copy link

+1. Support expression in ng-true-value

@federosky
Copy link

+1 on supporting expressions!
In my case, need to build a form dynamically.
Eg: http://jsfiddle.net/federosky/N8Wjm/5/

@rbuc
Copy link

rbuc commented May 8, 2013

+1 for integer

@devijvers
Copy link

1+ for integer

@JustinTArthur
Copy link

+1 for integer (or any JS number)

@fmquaglia
Copy link

👍 for supporting expressions please! please! pleaseeee! :-)

@simonsparks
Copy link

+1 at least for integer support, preferably expressions as well.

@petebacondarwin
Copy link
Contributor

How about someone puts forward a PR for supporting numbers?

simonsparks added a commit to SparksCreative/angular.js that referenced this issue Jul 17, 2013
Suggested approach for supporting numerical true/false values in checkbox inputs.
simonsparks added a commit to SparksCreative/angular.js that referenced this issue Jul 17, 2013
documentation update to convey support for both string and number values in ngTrueValue and ngFalseValue attributes
@mattlanham
Copy link

+1

@be1box
Copy link

be1box commented Mar 12, 2014

+1 for integer type

@endorama
Copy link

+1

@josephniet
Copy link

+1 for expressions

@matochu
Copy link

matochu commented Mar 30, 2014

+1

@archseer
Copy link

+1

2 similar comments
@nitintutlani
Copy link

+1

@hcliff
Copy link

hcliff commented Jun 10, 2014

+1

@johnculviner
Copy link

👍

These are the hacks that are required now (many WTFs):

<input type="checkbox" ng-model="fake" ng-checked="!notChecked" ng-change="notChecked = !notChecked"/>

@gevgeny
Copy link

gevgeny commented Jun 19, 2014

+1

@jancarloviray
Copy link

+1 it's been two years of "+1"s. Why aren't we supporting this yet?

@jullierme
Copy link

@jancarloviray, +1

@caitp caitp closed this as completed in c90cefe Jul 2, 2014
ckknight pushed a commit to ckknight/angular.js that referenced this issue Jul 16, 2014
ngTrueValue and ngFalseValue now support parsed expressions which the parser determines to be constant values.

BREAKING CHANGE:

Previously, these attributes would always be treated as strings. However, they are now parsed as
expressions, and will throw if an expression is non-constant.

To convert non-constant strings into constant expressions, simply wrap them in an extra pair of quotes, like so:

    <input type="checkbox" ng-model="..." ng-true-value="'truthyValue'">

Closes angular#8041
Closes angular#5346
Closes angular#1199
@eekboom
Copy link

eekboom commented Aug 7, 2014

Too bad: To me this means things got more complicated.
Previously I used
ng-true-value="{{proxyOnValue}}"
where proxyOnValue was initialized in a controller.
(The same view is reused for HTTP/HTTPS/FTP/POP3/SMTP proxy configuration where the actual value is different.)

Now I tried
ng-true-value="proxyOnValue"
but that throws an exception because the expression is not constant.

So this means I have to replace a simple implementation (ngTrueValue) with a more complex implementation (watch or Object.defineProperty), so actually the opposite of what was intended.

Why this artificial restriction?
Just

  • use the current value of ngTrueValue/ngFalseValue whenever the model changes or the user clicks the checkbox
  • for good measure have an internal watch on the ngTrueValue/ngFalseValue expressions (if they are not constant) and update the checkbox state when the watch triggers.

@petebacondarwin
Copy link
Contributor

@eekboom - you can still use your interpolation: http://plnkr.co/edit/LQ6OpFjkjiFLxxMJ9hxj?p=preview

@dliebscher
Copy link

@petebacondarwin - he can use the interpolation, but it won't help him: http://plnkr.co/edit/nNwjEkPIDJwe60HWX950?p=preview
The value is checked only once - later changes are not taken into acount, so only the initial value is used always.

@petebacondarwin
Copy link
Contributor

@dliebscher - my understanding was that @eekboom only wanted to initialise it once:

Previously I used ng-true-value="{{proxyOnValue}}" where proxyOnValue was initialized in a controller.

@eekboom
Copy link

eekboom commented Aug 8, 2014

Yes and no: I want to initialize it only once, but only after the proxy configuration has been loaded via xhr. So it changes (from undefined) once after the view is initialized.

@ali-bugdayci
Copy link

@eekboom
When I was migrating from 1.2, I switched to following:

ng-true-value="{{proxyOnValue}}"

to

ng-true-value="'{{proxyOnValue}}'"

Which works, but looks dumb

@getu-lar
Copy link

getu-lar commented Feb 3, 2015

I just had an interesting realization. What I was trying to do - and from the looks of it, what a lot of you have been trying to do - can actually be accomplished with:

ng-true-value="{{ myVariable | json }}"

This supports string values, booleans and numbers. Not sure yet whether I actually like this, but I certainly found it entertaining. And maybe this will help somebody else.

@mdaparte
Copy link

getu-lar i've tried what you said, with a complex object, it works. In the ng-false-value i filled with ng-false-value="{}" .Before deal with data, i pass a filter to cut off all falsy values from the array. So, many thanks!

@solaise73
Copy link

getu-lar 's solution worked for me. Thanks.

@Hyzual
Copy link

Hyzual commented Aug 11, 2015

I was trying to use an expression which resolved to a string with underscore in it, e.g. "101_3". I used getu-lar 's solution and it simply works. Feels like a hack though. Thanks for sharing it !

@FX-HAO
Copy link

FX-HAO commented Apr 6, 2016

+1 for expressions

@guyromb
Copy link

guyromb commented May 2, 2016

+1

@807811b0-1373-11e5-b60b-1697f925ec7b

It doesn't seem like there is much hope for Angular team to provide a sane checkbox directive for 1.x series... It can't be too difficult. Expression support would be fully backwards compatible due to the mandatory quoting.

Until then the suggested workaround is working for me:

ng-true-value="{{ myVariable | json }}"

Ensure that myVariable is defined in the controller. I tried to define it in post-link and it did not work.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.