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

Schoof

<option value="" selected>Anywhere</option> this will solve your problem. – Blinding

Answer 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!

Palaeogene

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

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.. – Kenny

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

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

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

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

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. – Palaeogene

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

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. – Palaeogene

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

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. – Palaeogene

Answer 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.

Grandaunt

+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'. – Vigue

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

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. – Resolute

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

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

Answer 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>

Yard

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> – Yard

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

Answer 4

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>

Mimi