angularJS - add a Static option with ng-options

Question

I am using ng-options to print all the options for a form in my angular app. I get the value directly from my database which gives me a list of countries:

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">

Here when the page is loaded, the select doesnt show anything, i.e. there is no placeholder whereas I'd like to print a static value like "anywhere" without having to add it in my "countries" list.

I have tried this:

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
<option>Anywhere</option>
</select>

But it's not working

Does anyone have an idea how to solve this?

Thanks

<option value="" selected>Anywhere</option> this will solve your problem. — Sheelpriy
– Sheelpriy, Commented Jun 14, 2014 at 2:49

Cozzbie · Accepted Answer · 2015-12-30 17:36:11Z

18

This is probably a late post but you should almost never use ng-repeat where ng-options is better suited like this case because new scopes are created in ng-repeat and thus you'd have more overhead.

The solution to your problem is well written in the angular docs and what you need looks somewhat like

<select ng-options="country.country for country in countries"
        ng-model="selectedCountry"
        ng-change="updateSelectedCountry(selectedCountry)"
       class="form-control">
   <option value="" disabled>Anywhere</option>
</select>

With this angular uses the value="" to set a null value and starts iteration from after that value.

answered Dec 30, 2015 at 17:36

Cozzbie

1,0652 gold badges12 silver badges27 bronze badges

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

5 Comments

Evgeniya Manolova Over a year ago

+1 ngOptions is always better than ngRepeat in selectboxes. In the example above if you remove the disabled attribute, the extra option tag becomes a valid selectable option. A suitable case for that is when you want to have an option like 'none' or 'all'.

amdev Over a year ago

Exactly, i use it for "all" option, but i can't add two option like that ( "all" and "none" ) and if value is different that "" it doesn't work :/

RushVan Over a year ago

Great solution. How could you use something similar to add a static option to the end of the iteration rather than the start? For example to create a 'more' option.

Cozzbie Over a year ago

@maskers For this you'd have to concatenate the "more" option to your model. Hardly think angular provides for anything beyond this..

RushVan Over a year ago

Cold fact, seems it takes a bit of manual effort. Using this example and giving it a shot - bennadel.com/blog/….

hassassin · Accepted Answer · 2014-03-10 22:32:25Z

10

You could always just do this:

<select ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
    <option>Anywhere</option>
    <option ng-repeat="country.country for country in countries">{{country.country}}
    </option>
</select>

Here is my fiddle example

Hope this helps!

answered Mar 10, 2014 at 22:32

hassassin

5,0641 gold badge32 silver badges39 bronze badges

11 Comments

Gangadhar Jannu Over a year ago

your answer is great. However I've read that ng-repeat only supports string data So If countries is an object that contains another object It will not work. Please refer undefinednull.com/2014/08/11/…

Gangadhar Jannu Over a year ago

How can we pre-select an option if we follow this kind of approach..? I've tried setting the selectedCountry to some values but it not working..

hassassin Over a year ago

Perhaps you should ask this as an actual question, or find a similar one :)

Shreyas Over a year ago

Works fine, though I am not able to remove the blank option Help!

hassassin Over a year ago

Please ask questions as questions, and not as comments in other questions.

|

Community · Accepted Answer · 2017-05-23 12:26:14Z

1

I made a slight adjustment to hassassin's fiddle. This is a little more inline with how ng-options is intended to work. Example

var myApp = angular.module('myApp', [])
    .controller('TestController', ['$scope', function ($scope) {
        $scope.data = [1,2,3];
        $scope.sel = '';
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
    {{sel}}
    <select ng-model="sel" ng-options="val for (key , val) in data">
        <option value="">any</option>
    </select>
</div>
  </div>

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jun 23, 2015 at 11:03

Carson Drake

1711 silver badge8 bronze badges

2 Comments

Carson Drake Over a year ago

You can preselect by setting $scope.sel equal to any of the values in ng-options OR the value of the default <option value="">Static option</option>

nlucaroni Over a year ago

Note : The value for the any option is null, that may not be intended.

Fabricio · Accepted Answer · 2018-10-28 23:21:08Z

0

You should set the value attribute in the custom option tag, in your example should be:

<select ng-options="country.country for country in countries" ng-model="selectedCountry" ng-change="updateSelectedCountry(selectedCountry)" class="form-control">
  <option value='anyValueForThisOption'>Anywhere</option>
</select>

answered Oct 28, 2018 at 23:21

Fabricio

3,3172 gold badges18 silver badges22 bronze badges

Collectives™ on Stack Overflow

angularJS - add a Static option with ng-options

4 Answers 4

5 Comments

11 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

11 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related