3

Apparently AngularJS cannot properly construct a list of <option> elements as a simple template in IE, so it provides the ng:Options directive (see https://github.com/angular/angular.js/issues/235).

After looking at the source, I was able to construct the options with the desired labels, as follows (JSFiddle):

<!-- what I'd like to do -->
<select>
    <option ng:repeat='key in keys' value='{{key}}'> {{lookup[key].firstName}} {{lookup[key].lastName}} </option>
</select>
<br/>
<br/>
<!-- what Angular lets me do -->
<select ng-model='key' ng:options='k as lookup[k].firstName + " " + lookup[k].lastName for k in keys'></select>

However, when I inspect the options with Firebug, I see that the value is a numeric index, not my desired key value (I was hoping the initial k would be used as the option value).

I haven't looked deeply into the code, so don't know if there's another part of the expression that I'm missing (the regex doesn't seem to have any additional relevant keywords).

I was hoping that someone here might know this directive well enough to tell me (1) how to do it, or (2) that I'm out of luck.

kdgregory
  • 38,754
  • 10
  • 77
  • 102
  • possible duplicate of [AngularJS - value attribute for select](http://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select) – kdgregory Feb 13 '13 at 20:05
  • This answer is what finally made me get it: http://stackoverflow.com/a/13808743/199712 – Jason Swett Nov 21 '14 at 21:44

1 Answers1

1

Your desired key value is in the property you specify by ng-model, i.e., key. Add {{key}} to the bottom of your HTML (just after your last select list) to see it.

As you discovered, Angular stores the array index in the HTML. For more about this, see AngularJS - value attribute for select

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • That makes sense. In the Angular world, the only thing that matters is changes to the model. Unfortunately, I'm trying to blend Angular into some existing JQuery-driven actions. I suppose I could pull `key` out of the scope in my JQuery code, but it's probably easier to just build the selects there as well (I don't get the benefit of interpolation with `ngOptions`, so it's a tossup). – kdgregory Feb 13 '13 at 20:03