angularJS - add a Static option with ng-options

问题

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

回答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!

回答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.

回答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>

回答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>

来源：https://stackoverflow.com/questions/22312150/angularjs-add-a-static-option-with-ng-options

标签

javascript

angularjs

ng-options