current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.2 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I would like to set different text / value for a dropdown I have with angularJS. Currently both the text and the value are same by using this syntax:

<select name="flightNum" class="form-control" ng-model="model.flight"
       ng-options="v.Value as v.Text for v in flights" required></select>

I tried this approach:

<select name="flightNum" class="form-control" ng-model="model.flight" 
          ng-options="v.Value as v.Text for v in flights" required>
    <option ng-repeat="v in flights" value="{{v.Value}}"> {{v.Text}}</option>
</select>

But I've got the same text/value combination. Any idea what do I need to change to make this working with angularJS?

Thanks in advance, Laziale

share|improve this question
    
please see here jsbin.com/coculu/1/edit seems to be fine your fist option – sylwester Oct 29 '14 at 22:19
    
@sylwester in the example you have, if you inspect the element you'll see that the value is 0 and 1 for the dropdown items gyazo.com/06a5627b8b1ce76f95b1ad918cecb0de – Laziale Oct 29 '14 at 22:25
1  
you don't have to worry about that please see jsbin.com/coculu/2/edit model.flight is binding to proper value – sylwester Oct 29 '14 at 22:27
up vote 1 down vote accepted

As long as your $scope.flights is setup properly, the first syntax you showed should work. I've setup a plunker to show this in action at http://plnkr.co/edit/PIXZZO81aQKj4kmngoXy?p=preview

It has the following data structure for $scope.flights:

  $scope.flights = [{
    value: 'val1',
    text: 'text1'
  }, {
    value: 'val2',
    text: 'text2'
  }, {
    value: 'val3',
    text: 'text3 '
  }]

Then, the select can be written essentially as you have it (i used lowercase value and text on accident, but just make sure it matches between the controller and the html):

<select name="flightNum" class="form-control" ng-model="model.flight" ng-options="v.value as v.text for v in flights" required></select>

With this setup, the dropdown is populated with the values contained in the "text" fields, but selecting something sets the "value" into the model.flight variable. You can see this in the Plunker mentioned above.

Is this the behavior you're wanting? If not, what is happening that is different/unexpected?

share|improve this answer
up vote 1 down vote

you need to add track by in the ng-options

<select name="flightNum" class="form-control" ng-model="model.flight"
       ng-options="v.Value as v.Text for v in flights track by v.Value" required>
</select>

and that's it.

share|improve this answer
    
Thanks! I had spent too much time trying to figure this out. Appreciate the answer. – Casey Crookston Nov 18 '15 at 17:11
    
glad that this helped you. – xploshioOn Nov 18 '15 at 21:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.