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

时间:2015-11-30 07:29:20

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

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

4 个答案:

答案 0 :(得分:19)

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

答案 1 :(得分:8)

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

来自角度文档:

  

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

Source docs

在我看来,设置默认值的正确方法是使用从ng-model中选择的值预先填充ng-options属性,其余角度为

基本上,当您定义$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/

答案 2 :(得分:1)

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

答案 3 :(得分:0)

我会建议一个例子 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中的键值对。

相关问题