Angular JS ng-model对<select>标签无效的情况-优快云博客

本文详细介绍了在AngularJS框架中，如何正确地使用Select元素与Ng-Model指令进行数据绑定。特别关注了两种常见场景：一是当Select元素的选项通过Ng-Repeat指令动态生成时，如何利用Ng-Selected指令确保正确的选项被选中；二是当Select元素用于选择不同类型的奖项时，如何在Ng-Model更新后自动切换选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景一：

<select ng-if="item.award_type==1" id="award{{$index+1}}" name="XXXXX[award{{$index+1}}]" ng-model="item.award">
      <option ng-repeat="(key, value) in List track by $index" value="{{key}}">{{value}}</option>
</select>

使用场景二：

<select id="award_type{{$index+1}}" name="XXXXX[award_type{{$index+1}}]" ng-model="item.award_type" ng-change="changeAwardType($index)">
       <option value="0">请选择奖品</option>
       <option value="1">商品券</option>
       <option value="2">优惠券</option>
       <option value="3">实物奖励</option>
</select>

<select> - <option> 配合 ng-model 使用的话

如果是场景二， ng-model 绑定数据后，下面的 <option> 能随 ng-model 绑定的数据改变，即将对应value的<option>设为selected；

如果是场景一，<option> 使用 ng-repeat 绑定数据，<select>用 ng-model 绑定则无法起到将对应的<option>设为selected，此时代码得做相应的修改，使用ng-selected进行处理

<select ng-if="item.award_type==1" id="award{{$index+1}}" name="XXXXX[award{{$index+1}}]" ng-model="item.award">
      <option ng-repeat="(key, value) in List track by $index" value="{{key}}" ng-selected="item.award==key?'selected':''">{{value}}</option>
</select>