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

【问题标题】：How to set default value in ng-options如何在 ng-options 中设置默认值
【发布时间】：2017-05-29 18:40:55
【问题描述】：

我可以在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

【问题讨论】：

标签： javascript angularjs ionic-framework html-select ng-options

【解决方案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>

【讨论】：

【解决方案2】：

所有这些都错过了ng-init。

来自角度文档：

可以滥用该指令在模板中添加不必要的逻辑量。 ngInit 只有少数合适的用途，例如用于别名 ngRepeat 的特殊属性，如下面的演示所示；以及通过服务器端脚本注入数据。除了这几种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。

Source docs

在我看来，设置默认值的正确方法是使用从 ng-options 中选择的值预先填充 ng-model 属性，剩下的就是 angular。

基本上，当您定义$scope 属性时，您的选择将绑定以从您的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 分配您告诉它选择的实际属性。

查看完整的小提琴演示：http://jsfiddle.net/kb99gee8/

【讨论】：

我也想知道，因为我是这样做的。 +1
@klskl 我认为这只是有人不喜欢因错误使用nginit 而被指责。我想不出任何其他原因，甚至文档都说它应该只用于几个不包括这个的用例。
如果 ng-options 中不存在 ng-model 值怎么办？它将显示为空。

【解决方案3】：

我已经使用你的代码和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/>

【讨论】：

这是假设您的第一个项目是“- Select -”。如果你没有那个选项怎么办？还是要手动添加吗？

【解决方案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};

模型值应该等于场地名称列表中的键值对。

【讨论】：