angularjs - Add multiple hard-coded options to select box with ng-options

Question

I have a select box that is populated with ng-options. I know you can add a default option manually, like so:

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown"  id="address_dropdown">
    <option value="" ng-selected="selected">Add a new address</option>
</select> 

Is there any way (in angular) to add multiple options? The client now wants to have the first, default option say "Select from addresses", and have the Add New Address option shown above be the last option in the list, after all the populated options from ng-options.

(I know I could use jQuery to add that option, but would rather keep it all angular if possible.)

Southpaw

you have to do populate those default options in $scope.address_dropdown – Varsity

Answer 1

EDIT 2: To you, downvoters: You may notice, this post is from march 2014. Use the source, Luke! (I am not into angularJs anymore)

EDIT: this wont work "If you want the model to be bound to a non-string" as Emmy mentioned!

try this:

    <select ng-model="YourModel">
      <option value="" ng-selected="selected">an option</option>
      <option ng-repeat="item in items">{{item.name}}</option>
      <option value="">another option</option>
    </select> 

have a nice weekend!

Navaho

If you want the model to be bound to a non-string, in my case it's an object, you need to use ng-options, not ng-repeat. See the note at on the API doc. – Southpaw

whoops, didn't knew this. thanks! i will edit my answer – Navaho

I also added a Value="{{item.value}}" -- I couldn't find a way for adding hard coded last option using ng-options, I needed "Show All" as last option... – Lamm

Answer 2

Amend your controller to supply address_dropdown with additional options

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in getAddress_dropdown(address_dropdown)"  id="address_dropdown">
  <option value="" ng-selected="selected">Add a new address</option>
</select> 

$scope.getAddress_dropdown=function(data)
{
    var temp=[{dropdown_display: 'Select from addresses'}];
    return temp.concat(data);
}

Ibbie

Answer 3

Here is an example that manually add options without ngOptions but still bound to the model that I think related to your question:

http://jsfiddle.net/armyofda12mnkeys/cd6d5vfj/8/

Note: I put the empty '--Please Choose--' and 'Add new unit' options in the middle to see how they can be selected. By default when land on the page ng-selected sets 'Add new unit' to be true (i wonder if angular smartly detects '--Please Choose--' could have also been selected since its model is empty and just selects the last true option, knowing you cant have two selected options in a regular dropdown?).

if you set $scope.currentquestion.someOtherParam = false; and run, then you get --Please choose-- as the default selection.

Then setting $scope.currentquestion.metric_pref = 'stn'; and run, then you should get stones set as the default.

Then changing another of the options you can see the model updating.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">

        <h3>{{currentquestion.text}}</h3>

        <select 
          ng-model="currentquestion.metric_pref"
          name="{{currentquestion.qid}}"
          id="{{currentquestion.qid}}"       
         >

         <option value="kg">
              kg.
         </option>
         <option value="">
             --Please choose--
         </option>
         <option value="lbs">
              pounds
         </option>
        <option value="add" ng-selected='currentquestion.someOtherParam'>
             Add new unit
         </option>
         <option value="stn">
              stones            
         </option>

        </select>
        CurrentVal:{{currentquestion.metric_pref}}
    </div>
</div>
var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl", function ($scope) {
    $scope.currentquestion = {};
    $scope.currentquestion.qid = "QS1";
    $scope.currentquestion.text = "What unit do you prefer to state your weight in?";    
    $scope.currentquestion.metric_pref = '';//can put stn in here to default at stones
    $scope.currentquestion.someOtherParam = false;
    //$scope.currentquestion.unit_options = [ 'lbs' , 'stones' , 'kg' ]; //lbs. for US, stones for UK, metric for others
    //not using ng-options to build the value/text of the option as I need to use ng-translate in the code

});

Favorable