如何在 Angular.js 选择框中有一个默认选项

Posted

技术标签:

【中文标题】如何在 Angular.js 选择框中有一个默认选项【英文标题】：How to have a default option in Angular.js select box 【发布时间】：2013-08-14 04:38:28 【问题描述】：

我在 Google 上搜索过，但找不到任何内容。

我有这个代码。

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

有了这样的一些数据

options = [
   name: 'Something Cool',
   value: 'something-cool-value'
, 
   name: 'Something Else',
   value: 'something-else-value'
];

输出是这样的。

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如何将数据中的第一个选项设置为默认值，以便获得这样的结果。

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

【问题讨论】：

如果有一个没有假设使用 Angular 来构建选项的答案，那就太好了。如果选项已经是标记的一部分怎么办？ @pspahn - 根据docs.angularjs.org/api/ng/directive/ngOptions：仅a **single** hard-coded &lt;option&gt; element ... can be nested into the &lt;select&gt; element. 选项可能还不是标记的一部分。 @pspahn 不会回答 OP，而是一个完全不同的问题...... 【参考方案1】：

您可以像这样简单地使用ng-init

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

【讨论】：

我在这个工作中遇到了问题，那是我使用'track by'，删除它解决了问题，以防万一有人帮助下线：D 这个答案没有错，但在我的具体情况下，ng-init 对我来说失败了。问题是我正在使用的值在 ng-init 运行时还不可用：我通过 ajax 调用获得了值，此时 ng-init 已经完成。最后，我在那个值上使用了一个观察者，在那个函数中我做了和我在 ng-init 中做的一样的事情。那行得通。 我在解决这个问题时也遇到了问题，@maurits 评论把我带到了这个***.com/questions/22348886享受！ Angular 的文档说更好地使用控制器 $scope 来初始化这些值docs.angularjs.org/api/ng/directive/ngInit 警告：为此目的使用 ng-init 会导致对 $digest() 方法的过度调用，这可能会导致您的控制台输出看起来全是红色和丑陋的，并带有类似“10 $digest( ) 迭代次数达到。正在中止！”【参考方案2】：

如果您想确保在视图初始化时不会覆盖您的 $scope.somethingHere 值，您需要像这样在 ng-init 中合并 (somethingHere = somethingHere || options[0].value) 值：

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

【讨论】：

此解决方案运行良好，比所选答案更好。 ng-init 不应该像这样 ng-init="somethingHere = somethingHere || options[0]" ?? options为空怎么办？就像options 数据来自外部来源一样。 @suud 你只需要在你的 ng-init 中检查 options && options.length > 0 。真的，这大部分应该在你的控制器中完成，所以它是可测试的。 @BenLesh 如果我想写一些文本（字符串）而不是第一个选项。ng-init="somethingHere= somethingHere || 'Select one' " 我试过这样。但它没有用。我的代码有什么问题【参考方案3】：

试试这个：

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

Javascript

function Ctrl($scope) 
    $scope.options = [
        
          name: 'Something Cool',
          value: 'something-cool-value'
        , 
        
          name: 'Something Else',
          value: 'something-else-value'
        
    ];

    $scope.selectedOption = $scope.options[0];

Plunkerhere.

如果你真的想设置将绑定到模型的值，那么将ng-options属性更改为

ng-options="option.value as option.name for option in options"

和 javascript 来

...
$scope.selectedOption = $scope.options[0].value;

考虑到上述情况，另一个 Plunker here。

【讨论】：

问题是我必须为大量选择框执行此操作。 没听懂。你需要做什么？ 我可能不得不手动完成 50+ 选择框 您的意思是为每个选择框设置默认值？如果是这样，我想你的问题还不清楚。无论如何，我是否正确地假设您必须将项目加载到每个选择框中？如果是这样，我认为初始化它们的默认值不会有什么大不了的。 我的问题是选项的索引是从表单上的“提交”返回的。我需要的是你调用的 option.name，它是从一个普通的旧 rails 表单返回的。复选框和单选按钮可以正常工作，因为您使用 ng-repeat 来获得正确的标记。如何在表单提交时返回 option.name？【参考方案4】：

只有一个answer by Srivathsa Harish Venkataramana 提到了track by，这确实是一个解决方案！

这是一个示例以及如何在 select ng-options 中使用 track by 的 Plunker（下面的链接）：

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

如果selectedCity 是在角度范围上定义的，并且它具有与cities 列表中任何city 中的任何id 相同的值的id 属性，它将在加载时自动选择。

这是 Plunker： http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

查看源文档了解更多详情： https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

【讨论】：

谢谢它帮助了我 ;) 太棒了！谢谢！【参考方案5】：

我认为，在包含 'track by' 之后，您可以在 ng-options 中使用它来获得所需的内容，如下所示

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

这样做更好，因为当您想用对象列表替换字符串列表时，您只需将其更改为 

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

其中 somethingHere 是一个具有属性 name 和 id 的对象，当然。请注意，'as' 不用于这种表达 ng-options 的方式，因为它只会设置值，并且在使用 track by 时无法更改

【讨论】：

这对我有用。我认为 Angular 需要一些东西来将我的范围模型中的对象识别为等同于参考列表的选择。 “通过 guarantor.code 跟踪”成功了！【参考方案6】：

接受的答案使用ng-init，但document 表示尽可能避免使用ng-init。

ngInit 唯一合适的用途是为特殊属性设置别名 ngRepeat，如下面的演示所示。除了这种情况，你应该 使用控制器而不是 ngInit 来初始化作用域上的值。

您也可以使用ng-repeat 代替ng-options 作为您的选项。使用ng-repeat，您可以将ng-selected 与ng-repeat 特殊属性一起使用。即 $index, $odd, $even 使这项工作无需任何编码。

$first 是 ng-repeat 特殊属性之一。

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="id">
      value
    </option>
  </select>

---------------------- 编辑----------------- 虽然这可行，但当您知道要选择什么值时，我更喜欢 @mik-t 的答案 https://***.com/a/29564802/454252，它使用 track-by 和 ng-options 而不使用 ng-init 或 ng-repeat。

仅当您必须选择第一项而不知道要选择什么值时，才应使用此答案。例如，我将其用于自动完成，这需要始终选择第一项。

【讨论】：

这可行，但不应该被使用，因为ng-options 比ng-repeat 更快、更优化。 @Iso 不同意你的观点，但你有该信息的来源吗？ 就在文档中：docs.angularjs.org/api/ng/directive/ngOptions“通过理解表达式的select as 部分分配&lt;select&gt; 模型的方式更加灵活”，“通过不创建来减少内存消耗每个重复实例的新范围”，“通过在 documentFragment 中创建选项而不是单独创建选项来提高渲染速度”【参考方案7】：

我的解决方案是使用 html 对我的默认选项进行硬编码。像这样：

在 HAML 中：

%select'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"
  %option:value => "", :selected => "selected"
    BC &amp; ON

在 HTML 中：

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

我希望我的默认选项从我的 api 返回所有值，这就是我有一个空白值的原因。也请原谅我的haml。我知道这不是对 OP 问题的直接答案，但人们在 Google 上找到了这个。希望这对其他人有帮助。

【讨论】：

我尝试将其转换为 html，但在我尝试过的所有在线转换器中都失败了。 为什么不发布html？我的意思是，发布这样的代码真的有必要吗？这不像 OP 在问题中使用模板引擎。【参考方案8】：

使用下面的代码从您的模型中填充选定的选项。

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="room.roomName" ng-selected="room.roomName == selectedRoom.roomName" value="room.roomName">room.roomName</option>

</select>

【讨论】：

为我工作了 lekker。负责为我的选择列表绑定选项的异步调用比带来 ng-model 的调用慢一点，所以这种方法对我有很大帮助。谢谢 Eebbesen:-) 这也适用于我。简单易懂。【参考方案9】：

根据您有多少选项，您可以将您的值放在一个数组中并像这样自动填充您的选项

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

【讨论】：

【参考方案10】：

在我的例子中，我只需要插入一个初始值来告诉用户选择一个选项，所以，我喜欢下面的代码：

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

当我尝试使用值为 != 的空字符串 (null) 的选项时，该选项被 angular 替换，但是，当放置这样的选项（具有 null 值）时，选择会出现此选项。

对不起，我的英语不好，我希望我能在这方面有所帮助。

【讨论】：

【参考方案11】：

将select 与ngOptions 一起使用并设置默认值：

有关更多ngOptions 用法示例，请参阅ngOptions 文档。

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: '2', name: 'Option B' //This sets the default value of the select in the ui
    ;
]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = data.selectedOption</tt><br/>
</div>

plnkr.co

Official documentation 关于带有角度数据绑定的 HTML SELECT 元素。

通过ngModel解析/格式化将select绑定到非字符串值：

(function(angular) 
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) 
    $rootScope.model =  id: 2 ;
  )
  .directive('convertToNumber', function() 
    return 
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) 
        ngModel.$parsers.push(function(val) 
          return parseInt(val, 10);
        );
        ngModel.$formatters.push(function(val) 
          return '' + val;
        );
      
    ;
  );
)(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
 model 
</body>

plnkr.co

其他例子：

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) 
   $scope.availableOptions = [
      name: 'Apple', value: 'apple' , 
      name: 'Banana', value: 'banana' , 
      name: 'Kiwi', value: 'kiwi' 
   ];
   $scope.data = selectedOption : $scope.availableOptions[1].value;
]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

【讨论】：

【参考方案12】：

这对我有用。

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

【讨论】：

【参考方案13】：

在我的情况下，因为默认值因表单中的情况而异。 我在选择标签中添加了一个自定义属性。

 <select setSeletected="data.value">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

在指令中，我创建了一个检查值的脚本，当角度填充它时，将具有该值的选项设置为选中。

 .directive('setSelected', function()
    restrict: 'A',
    link: (scope, element, attrs)
     function setSel=()
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined')             
         window.setTimeout( function()setSel(),300) 
       else
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       
     
    

  setSel()

)

刚刚从 coffescript 翻译过来，至少它的要点是正确的，如果不是洞的话。

这不是最简单的方法，但在价值变化时完成

【讨论】：

【参考方案14】：

回复Ben Lesh's answer，应该有这行

ng-init="somethingHere = somethingHere || options[0]"

而不是

ng-init="somethingHere = somethingHere || options[0].value"

也就是说，

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

【讨论】：

【参考方案15】：

只需使用ng-selected="true"，如下：

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

【讨论】：

【参考方案16】：

我会在控制器中设置模型。然后选择将默认为该值。前任： html:

<select ng-options="..." ng-model="selectedItem">

Angular 控制器（使用资源）：

myResource.items(function(items)
  $scope.items=items;
  if(items.length>0)
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  
);

【讨论】：

【参考方案17】：

这对我有用

ng-selected="true"

【讨论】：

最好的方法是使用ng-init，因为你正在设置一个ngModel。【参考方案18】：

如果您使用ng-options 来呈现您的下拉菜单，则默认选择与 ng-modal 具有相同值的option。 考虑这个例子：

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

因此默认选择具有相同值list.key 和selectedItem 的选项。

【讨论】：

【参考方案19】：

我需要默认的“请选择”不可选择。我还需要能够有条件地设置默认选择的选项。

我通过以下简单的方式实现了这一点： JS代码： // 翻转这 2 个以使用默认的“请选择”文本测试选择的默认值或无默认值 //$scope.defaultOption = 0; $scope.defaultOption = 键：'3'，值：'选项 3' ;

$scope.options = [
    key: '1', value: 'Option 1' ,
    key: '2', value: 'Option 2' ,
    key: '3', value: 'Option 3' ,
    key: '4', value: 'Option 4' 
];

getOptions();

function getOptions()
    if ($scope.defaultOption != 0)
     $scope.options.selectedOption = $scope.defaultOption;

HTML：

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: options.selectedOption.key</h1>

我希望这可以帮助有类似要求的其他人。

“请选择”是通过 Joffrey Outtier 的回答 here 完成的。

【讨论】：

【参考方案20】：

如果你有一些东西而不是仅仅初始化日期部分，你可以通过在你的控制器中声明它来使用ng-init()，并在你的 HTML 的顶部使用它。 这个函数就像你的控制器的构造函数一样工作，你可以在那里初始化你的变量。

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => 
   $scope.allOptions = [
      name: 'Apple', value: 'apple' , 
      name: 'Banana', value: 'banana' 
   ];
   $scope.myInit = () => 
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   
]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

【讨论】：

【参考方案21】： 
    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

【讨论】：

【参考方案22】：

在你的角度控制器中试试这个...

$somethingHere = name: 'Something Cool';

您可以设置一个值，但您使用的是复杂类型，并且角度将搜索键/值以在您的视图中设置。

而且，如果不起作用，试试这个： ng-options="option.value as option.name for option in options track by option.name"

【讨论】：

【参考方案23】：

我认为最简单的方法是

 ng-selected="$first"

【讨论】：

这个答案提供零上下文。

以上是关于如何在 Angular.js 选择框中有一个默认选项的主要内容，如果未能解决你的问题，请参考以下文章

Angular JS，带有选择框的过滤表

制作网页中普通的下拉选框中有一个“onchange”事件。 JQuery EasyUI下拉选框中那个事件与其相似？？？

如何在 jQuery 日历或 Angular Js 日历中将当前周末日期设置为默认日期。星期在星期日结束

如何在组合框中获取已选中的单选按钮？

如何动态更改组合框显示成员

如何在单选按钮组框中获取用户的选择以进行进一步处理？