[英]Angular always selects the first option in select element
So this is my select (I'm not using the ng-options feature as I need to disable options and I'm using angular 1.3.x, disable by
feature is in 1.4 afaik) 所以这是我的选择(我不使用ng-options功能,因为我需要禁用选项,而我使用的是angular 1.3.x,
disable by
功能disable by
在1.4 afaik中)
<select class="checkout"
ng-model="user.deliveryTime"
ng-change="timeUpdate = true"
ng-class="{'selected' : user.deliveryTime}" >
<option value="" disabled selected>Delivery Slot </option>
<option ng-repeat = "deliveryTime in intervals"
ng-disabled="deliveryTime.tooLate" value="{{deliveryTime.time}}">
{{deliveryTime.time}}
</option>
</select>
Here's how preselect a value for the select 这是预选选择值的方法
config.deliveryTimes(function(m){
$scope.intervals = m;
$scope.user.deliveryTime = $scope.intervals[2].time;
});
config.deliveryTimes(callback)
basically makes a HTTP request and back. config.deliveryTimes(callback)
基本上会发出HTTP请求并返回。
Even when I explicitly set the option of the 3rd value of the array, I always get the first option. 即使我显式设置了数组第3个值的选项,我也总是得到第一个选项。 When I hard-code the options in the select's controller, it still doesn't work.
当我在选择的控制器中对选项进行硬编码时,它仍然不起作用。
Any help? 有什么帮助吗?
Remove the selected
attribute on the default option and use ng-selected="user.deliveryTime === deliveryTime.time"
: 删除默认选项上的
selected
属性,并使用ng-selected="user.deliveryTime === deliveryTime.time"
:
<select class="checkout"
ng-model="user.deliveryTime"
ng-change="timeUpdate = true"
ng-class="{'selected' : user.deliveryTime}" >
<option value="" disabled>Delivery Slot </option>
<option ng-repeat = "deliveryTime in intervals"
ng-disabled="deliveryTime.tooLate" value="{{deliveryTime.time}}"
ng-selected="user.deliveryTime === deliveryTime.time">
{{deliveryTime.time}}
</option>
</select>
When you use ng-value instead of value in the option, the selected option is bind to the options set in the ng-model (user.deliverytime) 当您在选项中使用ng-value而不是value时,所选选项将绑定到ng-model中设置的选项(user.deliverytime)
<select class="checkout"
ng-model="user.deliveryTime"
ng-change="timeUpdate = true"
ng-class="{'selected' : user.deliveryTime}" >
<option value="" disabled>Delivery Slot </option>
<option ng-repeat = "deliveryTime in intervals"
ng-disabled="deliveryTime.tooLate" ng-value="deliveryTime.time"
>
{{deliveryTime.time}}
</option>
http://plnkr.co/edit/8hKIXwK5i35lczWEtuCw?p=preview http://plnkr.co/edit/8hKIXwK5i35lczWEtuCw?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.