如何在 ng-options 中设置默认值

Question

我可以在 angularjs 中设置一个带有默认值的下拉列表，

 <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
    <option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
 </select>

如何使用 ng-options 实现同样的效果？我用，

 <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = option.id"  
   ng-options="option.name for option in data track by option.id">
</select>

但是没用。示例 fiddle is here

Answer 1

使用ng-init设置ng-options的默认值。

这是：demo

<select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0].id"  
   ng-options="option.id as option.name for option in data">          
</select>

Answer 2

我已经使用你的代码实现了你所需要的，ng-options 就像你提到的，这里是 Working Fiddle

完整代码

<div ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect">Angular select:</label>
            <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0]"  
   ng-options="option.name for option in data track by option.id">
</select>
        </form>
        <br/> <tt>Selected value: {{repeatSelect.id}}</tt>

    </div>
</div>
<br/>

Answer 3

所有这些都没有使用 ng-init。

来自 angular 文档：

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

Source docs

在我看来，设置默认值的正确方法是简单地用 ng-options 中的值 select 预填充 ng-model 属性， angular 完成剩下的工作。

本质上，当您定义 $scope 属性时，您的 select 将绑定并为其分配 data 数组中的默认值。如果您的 data 数组来自 ajax 请求，只需在获得 data.

后分配它

.controller('test', ['$scope', function ($scope) {
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
    $scope.repeatSelect= $scope.data[0];
}]);

有一点需要注意。如果您在表达式中使用 as 关键字，则必须将您的 ng-model 与实际的属性分配给 select.

查看完整的 fiddle 演示：http://jsfiddle.net/kb99gee8/

Answer 4

我会举个例子 HTML部分

<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists"  ng-change="getmediationRooms(data.selectedOption)"></select>

在我的控制器中

$scope.data = {selectedOption: $scope.venueNamelists[i].name};

模型值应等于 venueNamelists 中的键值对。

如何在 ng-options 中设置默认值

How to set default value in ng-options

javascript

angularjs

ionic-framework

html-select

ng-options