Angular始终选择选择元素中的第一个选项

Angular always selects the first option in select element

本文关键字:选择 第一个 选项 元素 Angular      更新时间:2023-09-26

所以这是我的选择(我没有使用ng选项功能,因为我需要禁用选项,我使用的是angular 1.3.x,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>

以下是如何为选择预先选择值

config.deliveryTimes(function(m){
  $scope.intervals = m;
  $scope.user.deliveryTime = $scope.intervals[2].time;
});

CCD_ 2基本上进行HTTP请求并返回。

即使我明确设置了数组第三个值的选项,我也总是得到第一个选项。当我在select的控制器中对选项进行硬编码时,它仍然不起作用。

有什么帮助吗?

删除默认选项上的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>

当您在选项中使用ng值而不是值时,所选选项将绑定到ng模型(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