Using ng-selected to set select option attribute

[Kenneth]

Wondering if anyone has insight into the use of ng-selected to set the
selected attribute on an option list. We use a mix of Google Soy
templates, Angular, Backbone, and CoffeeScript in our application. I
generate the the select option list as follows:

<select id="config-prefs-default-metric-id" name="METRIC_ID">
<option ng:repeat="dm in getDefaultMetrics()" value="{literal}
{{dm.id}}{/literal}"
ng-selected="{literal}{{isMetricSelected(dm.id,
dm.name)}}{/literal}">
{literal}{{dm.name}}{/literal}
</option>
</select>

getDefaultMetrics: ->
return @metrics

isMetricSelected: (metricId, metricName) ->
if metricId == parseInt(@prefs.DEFAULT_METRIC_ID)
_.delay (() => $('#config-prefs-default-metric-id
option:contains(' + metricName + ')').attr('selected', 'selected')),
100
return true
else
return false

The hack I have right now requires a delay to be applied to jQuery
selector to set the selected attribute. Does Angular have a cleaner
way of setting the selected attribute that would not require this
jQuery selector? Seems that if the check for ng-selected is run that
setting the attribute would be part of the process but I may be
misunderstanding it's intent.

Thanks for the help

[Dan Doyon]

You should not be using ng-repeat for select, review below

http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.select 

--dan

---

From: Kenneth <kenneth....@gmail.com>
To: AngularJS <ang...@googlegroups.com>
Sent: Tuesday, May 8, 2012 11:09 AM
Subject: [angular.js] Using ng-selected to set select option attribute

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

[Kenneth]

Dan,

Thanks for the response but I don't seem to be able to map this to the
object structure I have. Does ng:options not allow you to define the
value of the option separate from the label? Here is a simple object:

[{
'id': '10005',
'name': "Blort"
}]

This needs to map to the following:

<select>
<option value="10005">Blort</option>
</select>

It seems that the assumption ng:options is making is that the value is
the same as the label. What am I missing? The reason I used ng:repeat
is because of this id/name mapping that I have defined in my backbone
model which I boiled down to this simpler object.

Thanks

On May 8, 12:43 pm, Dan Doyon <dando...@yahoo.com> wrote:
> You should not be using ng-repeat for select, review below
>

> http://docs.angularjs.org/api/angular.module.ng.$compileProvider.dire...
>
> --dan
>
> ________________________________
>  From: Kenneth <kenneth.l.sell...@gmail.com>

> To unsubscribe from this group, send email to angular+u...@googlegroups.com.

[Pawel Kozlowski]

Hi Kenneth!

On Wed, May 9, 2012 at 7:51 PM, Kenneth <kenneth....@gmail.com> wrote:

> Thanks for the response but I don't seem to be able to map this to the
> object structure I have. Does ng:options not allow you to define the
> value of the option separate from the label?

Of course angular allows you to define a label as you want, here is
the jsfiddle (BTW: next time try to send a simple jsfiddle
illustrating your problem, this way you will get responses faster):

http://jsfiddle.net/zqxT9/1/

You can find the comprehensive documentation with examples here:
http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.select

Actually what gets selected (selectedItem) is a reference to an item,
from there you can extract any value ({{selectedItem.id}}). This is a
beauty of the 2-way data binding in angular.

Hope this helps,
Pawel

[Dmitry]

Hi  Uri

have you figured out how to get rid of this empty element with "?" inside?

Thank you.

On Wednesday, July 25, 2012 3:23:33 PM UTC+2, Uri Goldshtein wrote:

Hi Guys,

   That's very nice.

   But what happens when the array in more then one element?

   As you can see in this example: http://jsfiddle.net/Urigo/CmL2V/

   If you will select a different element, and do 'inspect element', you will notice a strange behavior:

   First of all there is a new '?' element.

   Second, the "selected" attribute is not changed not matter what you do..

Anyone has a solution for this?

Thanks!

On Wednesday, July 11, 2012 10:06:11 PM UTC+3, Fabio Vedovelli wrote:

Actually what gets selected (selectedItem) is a reference to an item, 
from there you can extract any value ({{selectedItem.id}}). This is a 
beauty of the 2-way data binding in angular. 

Mind blowing! =O

[Pawel Kozlowski]

Hi Uri!

This works for me: http://jsfiddle.net/pkozlowski_opensource/CmL2V/5/
Selected model is displayed correctly.

You can see a blank (?) option since no model is selected so angular
needs to display something...

Hope this helps,
Pawel

On Wed, Jul 25, 2012 at 3:23 PM, Uri Goldshtein
<uri.gol...@gmail.com> wrote:
> Hi Guys,
>
> That's very nice.
> But what happens when the array in more then one element?
> As you can see in this example: http://jsfiddle.net/Urigo/CmL2V/
> If you will select a different element, and do 'inspect element', you
> will notice a strange behavior:
> First of all there is a new '?' element.
> Second, the "selected" attribute is not changed not matter what you do..
>
> Anyone has a solution for this?
>
> Thanks!
>
>
> On Wednesday, July 11, 2012 10:06:11 PM UTC+3, Fabio Vedovelli wrote:
>>

>> Actually what gets selected (selectedItem) is a reference to an item,
>> from there you can extract any value ({{selectedItem.id}}). This is a
>> beauty of the 2-way data binding in angular.
>>

>> Mind blowing! =O
>>
>> Em quarta-feira, 9 de maio de 2012 15h27min29s UTC-3, Pawel Kozlowski
>> escreveu:
>>>

> --
> 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/-/hEcs664YYUoJ.

[Tsvetan Tsvetkov]

Hi Uri,

Note that "selected" attribute that the option is initially selected, not currently selected option. You can check the documentation here:

https://developer.mozilla.org/en-US/docs/HTML/Element/option

On Wednesday, July 25, 2012 4:23:33 PM UTC+3, Uri Goldshtein wrote:

Hi Guys,

   That's very nice.

   But what happens when the array in more then one element?

   As you can see in this example: http://jsfiddle.net/Urigo/CmL2V/

   If you will select a different element, and do 'inspect element', you will notice a strange behavior:

   First of all there is a new '?' element.

   Second, the "selected" attribute is not changed not matter what you do..

Anyone has a solution for this?

Thanks!

On Wednesday, July 11, 2012 10:06:11 PM UTC+3, Fabio Vedovelli wrote:

Actually what gets selected (selectedItem) is a reference to an item, 
from there you can extract any value ({{selectedItem.id}}). This is a 
beauty of the 2-way data binding in angular. 

Mind blowing! =O

Em quarta-feira, 9 de maio de 2012 15h27min29s UTC-3, Pawel Kozlowski escreveu:

[Uri Goldshtein]

Thanks guys, helped a lot!

[mike...@gmail.com]

HI Pawel,

I am very new to Angular but as to Kenneth's point it even your example doesn't generate the markup he desired.  The value of the option is not set by his object property.  Is there a way to do this or do you have to manually process the the reference to get the desired value?  That's fine for displaying  using the template but if I was submitting the form, I'd want it to post the value supply from the object which isn't in the markup.

[Jaymes Bearden]

Thread resurrection, because I feel this is an important point that should be totally explained.

When using the array selector for ng-options, "item.title for item in items", each option is created with the value set an index into the items array, <option value="1">Some Item</option>. This makes sense, as you want to update ng-model with the chosen object from the items array. This will cause problems with form posting as the value attribute of the select element is not correctly set -- it still references the index of the object in the items array. There are two ways to fix this:

• <select name="itemId" ng-model="selectedItem" ng-options="item.title for item in items" value="{{selectedItem.id}}"> ... </select>
  

This will ensure that form posting is correct. You will also have a complete object when you change your drop down box BUT your option elements will still reference the array index of items. See this fiddle

• <select name="itemId" ng-model="selectedItem" ng-options="k as v for (k,v) in items"> .. </select>
  

This will also ensure that form posting is correct BUT you will not have a complete object when you change you drop down box -- instead you will just have a key reference in your object. This method also requires you change from array notation to object notation (key/value mapping) for your data set. This will give the desired markup as per the original request. See this fiddle.

I hope that clears up any confusion

Jaymes

[vincent.n...@gmail.com]

To get rid of the empty element: (because there's no model attached)

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

Source:

http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select

Op zaterdag 18 augustus 2012 20:35:01 UTC+2 schreef Pawel Kozlowski het volgende:

[Peter Bacon Darwin]

Or if you just don't want an empty option...

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" >
  <option style="display:none" value=""></option>
</select>