Possible to use an expression inside of ng:model?

[ProLoser]

I am having difficulty trying to get this to work:

<input type="checkbox" ng:model="field.value[{{token(option.name)}}]" value="{{option.value}}">

The reason I need this to work is because it's a series of checkboxes and I want their states to collectively populate an array or object literal, but both the . syntax an [] syntax seem to fail.

v0.10.5

What do?

[Dan Doyon]

Not sure what you are trying to do, if you create a fiddle, that would be helpful. 

here's one i created that might give you some ideas.

http://jsfiddle.net/dandoyon/efkAY/

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/0HH231TmVvYJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Igor Minar]

ng:model takes an expression (the result of which must be assignable) so what you want is:

<input type="checkbox" ng:model="field.value[token(option.name)]" value="{{option.value}}">

/i

--

[ProLoser]

Dan, view my fiddle for reference.

Igor, it does not work: http://jsfiddle.net/ProLoser/efkAY/4/

[Mike Coolin]

Looks like you need an  ng:click="function()" to update the model

[ProLoser]

Not sure what you're talking about but perhaps this is a bug? Can you update the fiddle to show what you're talking about?

Any time I'm having to manually do ng:click for things that are suppose to function already seems like a hack.

[ProLoser]

Nevermind, figured it out:

http://jsfiddle.net/ProLoser/efkAY/5/

So it seems I HAVE to make the variable an object literal, and I HAVE to define it beforehand (or I get undefined errors). The reason is because you cannot add to an array by doing var[key] = value.

The only issue I have is that the variable MUST be defined beforehand and it MUST be defined programmatically. Although this is okay in CakePHP a nifty trick they use to sort of 'declare' variables (or their namespaces) which is common alongside checkboxes like this is to use a hidden input. In other words, <input type="hidden" ng:model="values"> to ensure that there are no 'undefined' errors. However this alone will not set values to be an object literal. I tried adding ng:value="{}" or {{{}}} but both failed to work. I am curious if there any other tips for improvement, but for right now this is a reasonable solution.

[Igor Minar]

The value of a checkbox will always be true or false unless you use ng:true-value or ng:false-value in which case it can be an arbitrary string, but these strings are constant (as opposed to dynamically data-bound). I recall trying to data-bound these so that you could implement examples just like yours from within the template, but I came across some major issues and decided to skip it for now. You can either use ng:change or watch the checkbox value from the controller and do additional conversions if needed.

/i

 

[ProLoser]

Cool. That's fine, I'm used to $_POST values where the contents of the value attribute can optionally be the value of the checkbox when checked (or non-existent when not-checked) but having any solution is fine.

Now how do we mark this thread as resolved, lol.

[Witold Szczerba]

I have the same trouble right now with the way binding in checkboxes work.
I have checkboces ng:repeated over items and I would like to store
selected values in another array like this:

items = [{id:1, title:'one'}, {id:2, title:'two'}, {id:3, title:'three'}];
selected = [1,3]

,which means checkbox for title "one" and "three" should be checked.

I think the only thing really needed would be to be able to attach two
methods to checkbox, something like:
ng:onChecked = "someMethodWhenSelected(p1,p2,...,pN)"
ng:onUnchecked = "anotherMethodWhenDeselected(p1,p2,...,pN)"
ng:isSelected = "isSelected(p1,p2,...,pN)"

So, instead of ng:bind, one would be able to invoke whatever code in
controller to handle selecting/deselecting.

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/7N0_G90M9FIJ.

[Misko Hevery]

<div ng:repeat="item in items">

  <input type checkbox ng:model="selected" ng:change="toggle(item, selected)">

</div>

Where toggle method is on your controller which adds or removes the item from the selected list

[Witold Szczerba]

Ah, thank you Misko!

The only thing I had to add to your sample was ng:checked, so it looks
like this now:

<div ng:repeat="item in items">

<input type="checkbox"
ng:model="s"
ng:change="toggle(item.id, s)"
ng:checked="{{ isSelected(item.id) }}">
</div>

Working example, applied to ProLoser's example:

http://jsfiddle.net/witoldsz/efkAY/11/

Thanks,
Witold Szczerba

[Witold Szczerba]

An update. The following example:
http://jsfiddle.net/witoldsz/efkAY/11/
does not work correctly. The problem is that in such an expression:

<input type="checkbox" ng:model="v"
ng:change="toggleSelected(color.name, v)"
ng:checked="{{isSelected(color.name)}}">

The model "_v" does not gets initialized properly, it is always
null/false/undefined, look at the snippet below:
http://jsfiddle.net/witoldsz/efkAY/14/
As you can see above, two first checkboxes are checked, but theirs
model are incorrect, try deselecting them and see there are no updates
in the model.

The correct way is to use ng:init instead of ng:checked:
http://jsfiddle.net/witoldsz/efkAY/15/
<input type="checkbox" ng:model="v"
    ng:change="toggleSelected(color.name, v)"
    ng:checked="v = isSelected(color.name)">

Now model (v) gets initialized correctly and there is no de-sync
between "checked" and model value.

Regards,
Witold Szczerba

[Misko Hevery]

Why do you need to use ng:checked???

The checkbox will automatically check/uncheckitself based on the model

[Witold Szczerba]

Ah of course, you are right. I did paste the wrong snippet. Errata:

The correct way is to use ng:init instead of ng:checked:
http://jsfiddle.net/witoldsz/efkAY/15/

<li ng:repeat="color in colors">
{{color.name}}

<input type="checkbox" ng:model="v"
ng:change="toggleSelected(color.name, v)"

ng:init="v = isSelected(color.name)">
</li>

The key here is the "ng:init: which initializes the "v" model for the
scope of each list item.

Regards,
Witold Szczerba