9

我有一个填充有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 来添加该选项，但如果可能的话，我宁愿保持所有角度。）

4

3 回答 3

6

编辑 2：对你来说，downvoters：你可能会注意到，这篇文章来自 2014 年 3 月。使用来源，卢克！（我不再喜欢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>

周末愉快！

于 2014-03-21T15:20:54.977 回答
5

修改您的控制器以提供带有附加选项的 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);
}
于 2015-06-05T11:55:43.807 回答
0

这是一个手动添加不带 ngOptions 选项但仍绑定到我认为与您的问题相关的模型的示例：

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

注意：我把空的“--请选择--”和“添加新单元”选项放在中间，看看如何选择它们。默认情况下，当登陆页面时，ng-selected 将“添加新单位”设置为真（我想知道角度是否智能检测到“--请选择--”也可能被选中，因为它的模型是空的，只选择最后一个真选项，知道您不能在常规下拉列表中选择两个选项吗？）。

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

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

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

<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

});
于 2015-04-09T17:01:59.500 回答