Question

目前，我有类似的东西（简化）：

<select ng-model=model.policyHolder ng-options="person.index as person.name for person in model.insurance.persons">
  <option value>Someone else
</select>

这会创建一个下拉列表，其中包含人名的选项，而顶部的“其他人”则为空。问题是，如何在下拉列表的底部中获得空选项？

我非常希望继续使用ng-options，特别是因为控制默认选项的位置似乎太小了，无法证明稍微更冗长的<option ng-repeat>方式。

谢谢！

Answer 1

使用value=""

选项

像：

<select ng-model="model.policyHolder" ng-options="person.index as   person.name for person in model.insurance.persons">
  <option value="">Someone else</option>
</select>

如果您想在底部显示其他人，请点击下拉列表，您可以使用。

<select ng-model="model.policyHolder">
    <option ng-repeat="person in model.insurance.persons" value="{{person.index}}">{{person.name}}</option>
    <option value="">Someone else</option>
</select>

Answer 2

其他答案似乎在顶部添加了一个元素，而不是底部。

如果您想在列表的末尾添加某些内容，则可以始终在JavaScript中添加它。

查看工作plunk，改编自角度select documentation。

主要部分复制如下：

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };

     // Add the alternative option
     // may need to use $digest, depending on where in the process you do this.
      $scope.data.availableOptions.push({ id: '', name: 'None of the above'})
 }]);
})(window.angular);

ng-options：如何将空选项放在最后？

2 个答案: