angularjs二级联动下拉框出现空白项,value带有问号的解决方案

时间:2022-06-10 20:30:32
<div class="form-row clearfix aux-aligned">
       <div class="aux-label">餐廳位置 (香港/九龍/新界/離島/澳門)</div>
            <select style="display: block; height: 36px;" name="user_area" id="user_area" class="left select" title="餐廳位置 (香港/九龍/新界/離島/澳門)"  ng-options="a.city for a in list" ng-model="user.areaItem" ng-change="show()">
            </select>
</div>
                        
<div class="form-row clearfix aux-aligned">
   <div class="aux-label">餐廳地區</div>
      <select style="display: block; height: 36px;" name="user_district" id="user_district" class="left select" title="餐廳地區" ng-model="user.district"
               ng-options="d for d in user.areaItem.districts">
            <option value="">餐廳地區</option>
      </select>

  </div>


问题:当选择第二个后再选择第一个,选项二出现空白选项并且value中带有问号和上次选项二所选的值也就是user.district的值。

原因:当改变选项一时,选项二的列表随之改变,但是选项二的ng-model的值与之不匹配,于是出现了这种情况。

解决:改变选项一时重置ng-model为"".

  $scope.show = function() {
            $scope.user.district = '';
        };