angularjs - 添加多个硬编码选项以选择带有ng-options的框

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

我有一个用ng-options填充的选择框。我知道您可以手动添加默认选项，如下所示：

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

是否有任何方式（角度）添加多个选项？客户端现在希望使用第一个默认选项“从地址中选择”，并在ng-options中的所有填充选项之后，将上面显示的“添加新地址”选项作为列表中的最后一个选项。

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

（我知道我可以使用jQuery添加该选项，但如果可能的话，宁愿保持所有角度。）

3 个解决方案

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

编辑2：对你，downvoters：你可能会注意到，这篇文章来自2014年3月。使用来源，卢克！（我不再进入angularJs了）

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

修改您的控制器以提供address_dropdown以及其他选项

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

下面是一个示例，它手动添加没有ngOptions的选项，但仍然绑定到我认为与您的问题相关的模型：

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

注意：我在中间放置了空的' - Choose Choose--'和'Add new unit'选项，看看如何选择它们。默认情况下，当页面上的土地被选中时，“添加新单位”设置为真（我想知道角度是否巧妙地检测到' - 请选择 - '也可以被选中，因为它的模型是空的并且只选择最后一个真实选项，知道你不能在常规下拉列表中有两个选定的选项？）。

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

如果你设置$ scope.currentquestion.someOtherParam = false;并运行，然后你得到 - 请选择 - 作为默认选择。

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

然后设置$ scope.currentquestion.metric_pref ='stn';并运行，然后你应该将石头设置为默认值。

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

});

#1