Ng-options: how to put an empty option at the end?

Question

I currently have something like this (simplified):

<select ng-model=model.policyHolder ng-options="person.index as person.name for person in model.insurance.persons"> <option value>Someone else </select> 

This creates a drop-down list with options for people names and empty for “someone else” at the top. The question is, how do I get this empty option at the bottom of the drop-down list?

I would really like to use ng-options for this, especially since controlling the default position of the parameter seems too small to justify the slightly more detailed <option ng-repeat> method.

Thanks!

Answer 1

use parameter value=""

how

 <select ng-model="model.policyHolder" ng-options="person.index as person.name for person in model.insurance.persons"> <option value="">Someone else</option> </select> 

If you want to show Someone else below when you click on the drop-down list that you can use.

 <select ng-model="model.policyHolder"> <option ng-repeat="person in model.insurance.persons" value="{{person.index}}">{{person.name}}</option> <option value="">Someone else</option> </select> 

Answer 2

try to change

 <option value>Someone else 

to

 <option value="">Someone else</option> 

Answer 3

Other answers seem to add an element at the top, not the bottom.

If you want something at the end of the list, you can always add it to JavaScript.

See working plunk adapted from angular select documentation .

The main part is copied below:

 (function(angular) { 'use strict'; angular.module('defaultValueSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.data = { availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ], selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui }; // Add the alternative option // may need to use $digest, depending on where in the process you do this. $scope.data.availableOptions.push({ id: '', name: 'None of the above'}) }]); })(window.angular);