Question

所以这是我的选择（我没有使用ng-options功能，因为我需要禁用选项，我使用的是角度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;
});

config.deliveryTimes(callback)基本上发出HTTP请求并返回。

即使我明确设置了数组第3个值的选项，我总是得到第一个选项。当我对选择控制器中的选项进行硬编码时，它仍然无效。

有任何帮助吗？

Answer 1

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

Answer 2

在选项中使用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

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

2 个答案: