如何在ng选项中设置默认值

How to set default value in ng-options

本文关键字：设置 默认值 选项 ng      更新时间：2023-09-26

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

但没有用。样品小提琴在这里

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

这是：演示

<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>

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

从角度文档：

此指令可能会被滥用，从而在模板中添加不必要的逻辑量。ngInit只有一些适当的用途，例如用于混淆ngRepeat的特殊属性，如下面的演示所示；以及用于经由服务器端脚本注入数据。除了这几种情况外，您应该使用控制器而不是ngInit来初始化作用域上的值。

源文档

在我看来，设置默认值的正确方法是简单地用从ng-options中选择的值预先填充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分配实际属性，让它选择。

请参阅完整的小提琴演示：http://jsfiddle.net/kb99gee8/

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

我将举一个例子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中的键值对。

相关文章：