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

Solution 1

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!

Solution 2

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.

Solution 3

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>

Comments

[Buddybear]

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/…

[Buddybear]

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]

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

[Shreyas]

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

[hassassin]

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

[Carson Drake]

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>

[nzapponi]

@hassassin, your answer is wrong. You are not actually setting the value to be an object, but rather a stringified version of the object.

[hassassin]

The question was about adding any "Anywhere" option without adding it to the countries data. The answer provided does correctly answer that question. If you have a different question that this does not answer, simply ask it.

[nlucaroni]

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

[Agnosco]

@hassassin In jsfiddle.net/N5ckd/24, how can I get the value for {{sel.x}} ? thanks

[hassassin]

You should ask questions as new questions. It's not clear where you want that but why not just set values to d.x? jsfiddle.net/N5ckd/101 If this isn't what you mean, you should ask a new question and clarify.

[Evgeniya Manolova]

+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]

As said, unfortunally it doesn't if my <options> are object

[amdev]

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 :/

[hassassin]

That's correct. This is probably a good thing though as objects aren't ordered and just looping over them may have extra keys that you don't want. However you can just preprocess your object to an array of key value pairs, then it will work.

[RushVan]

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]

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

[RushVan]

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