angularjs ng-repeat级联下拉列表不更新

时间:2016-06-16 13:26:55

标签: javascript angularjs json api

我使用Angularjs时遇到此问题 我正在创建级联下拉,如下所示

            <div class="col-sm-2 pr10">
            <select class="PropertyType" ng-controller="LOV" ng-init="InitLov(140)" ng-model="PropertyType" ng-change="update(PropertyType)" >
                <option value=""  selected="selected" disabled="disabled"> {{type ? type: 'Property Type'}} </option>
                <!-- <option value="">-- Select Type --</option>-->
                <option ng-repeat="Lov in LovList" value="{{Lov.Value}}" >{{Lov['Lable'+Lang]}} </option>
            </select>
        </div>
        <div class="col-sm-2 pr10">
            <select class="PropertySubType" ng-controller="LOV" ng-model="PropertySubType" >
                <option value="" selected="selected"disabled="disabled" >{{subType ? subType: 'Property Sub Type'}}</option>
                <!--  <option value="">-- Select Sub Type --</option> -->
                <option ng-repeat="Sub in SubType" value="{{Sub.Value}}" >{{Sub['Lable'+Lang]}} </option>
            </select>
        </div>

和Angular文件:

            $scope.update = function (id) {
            $http.post("API/WebsiteService.asmx/getSubPropertyLov", { type: id }).success(function (data) {

                debugger;
                var rr = eval('(' + data.d + ')');
                $scope.SubType = rr.result; 

            });
        }

API返回数据,SubType范围获取它,但它不会更改下拉数据(PropertySubType), *该功能在LOV控制器内部。

1 个答案:

答案 0 :(得分:1)

不要在每个选择上重复ng-controller="LOV",这样他们都会得到不同的范围。将两个选择放在同一个控制器的范围内。

也不要使用ngRepeat,请使用ngOptions:

<div ng-controller="LOV">
  <div class="col-sm-2 pr10">
    <select class="PropertyType" 
      ng-init="InitLov(140)" 
      ng-model="PropertyType" 
      ng-change="update(PropertyType)"
      ng-options="Lov.Value as Lov['Lable' + Lang] for Lov in LovList">
      <option value="" selected="selected" disabled="disabled"> {{type || 'Property Type'}} </option>
    </select>
  </div>
  <div class="col-sm-2 pr10">
    <select class="PropertySubType" 
      ng-options="Sub.Value as Sub['Lable' + Lang] for Sub in SubType"
      ng-model="PropertySubType">
      <option value="" selected="selected" disabled="disabled">{{subType || 'Property Sub Type'}}</option>
    </select>
  </div>
</div>