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

问题

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

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

回答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);
}

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

});

来源：https://stackoverflow.com/questions/22562429/angularjs-add-multiple-hard-coded-options-to-select-box-with-ng-options

标签

angularjs

ng-options