Question

我有一个填充了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>

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

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

Answer 1

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

编辑：这不会起作用“如果你想让模型绑定到非字符串”，正如艾美提到的那样！

试试这个：

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

周末愉快！

Answer 2

修改您的控制器以提供带有其他选项的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);
}

Answer 3

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

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

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

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

然后设置 $ scope.currentquestion.metric_pref ='stn'; 并运行，那么您应该将 stone 设置为默认值。

然后更改另一个选项，您可以看到模型更新。

<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

});

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

3 个答案: