CODEWITHSUNDEEP
angularjs
MikeL
MikeL

Reputation: 208

Angular Select show a different text once selected

I am using AngularJS (1.5) and im trying to create a select dropdown that can display a different text when selected vs shown in dropdown options

Option example {id: 1, name: 'text', selected: 'this was selected'}

Given the example above, how can i show the name property when they open the dropdown but the selected property after the option is selected?

Upvotes: 0

Views: 1629

Answers (1)

user8827003
user8827003

Reputation:

You have a couple options for dropdowns in angularjs. If you're going the ng-repeat route, then if you have an array of objects structured like your example, then this would work:

<select ng-model="selectedItem">
    <option ng-repeat="item in items" value="item.selected"> {{item.name}} </option>
</select>

This will display the "name" in the dropdown, but since value=item.selected, it will assign the "selected" value to your ng-model.

Alternatively, you can do ng-options for the select and something like this would work:

<select ng-model="selectedItem" 
    ng-options="item.selected as item.name for item in items">
</select>

This does the same thing, but ng-options tends to allow more flexibility as you can assign entire objects to your model rather than just strings like ng-repeat only allows, plus angular claims it's faster.

Hope this helps. See here for more info https://docs.angularjs.org/api/ng/directive/select

Upvotes: 1

Related Questions