How to populate a value in a select ( HTML ) list in AngularJS

Question

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).

I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?

I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.

(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")

Lets say there is something like this:

<div class="col-md-8">
   <select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
 <option value="" disabled selected>Select</option>
 <option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Deepak Bansal · Accepted Answer · 2016-07-15 13:01:53Z

1

Use ngOptions.

<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

answered Jul 15, 2016 at 13:01

Deepak Bansal

1292 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:44:11Z

1

With ng-options you can do it like this:

<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
    <option value="" disabled selected>Choose a Country</option>
</select>
</div>

The location.id is set to the options value and the location.name is set to the text.

To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 15, 2016 at 13:19

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to populate a value in a select ( HTML ) list in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related