AngularJS级联下降,依赖下降没有填补

时间:2018-04-10 17:02:44

标签: angularjs ajax cascadingdropdown

所以我有2个下拉,需要先选择才能填充第三个。

问题是即使数据回来,第三个数据也没有填充。

由于它的设计方式,每个下拉列表都有自己的控制器,另一个下拉列表用于整个窗口。

来源小部件:

<select class="form-control" required name="dataDomain"
        ng-model="customFilters.dataDomain.value"
        ng-options="dataDomain.code as dataDomain.shortName for dataDomain in dataDomains"
        ng-change="customFilters.dataDomain.loadExtraData()">
        <option value="" translate>_NONE_</option>
    </select>

源控制器:

(function init() {
    $scope.customFilters = reportsService.filters;

    $scope.customFilters.dataDomain = {
      value: undefined,
      loadExtraData: function() {
              var reportType;
              if(this.containsData() && !this.isDisabled()) {
                  reportType = reportsService.filters.reportType.value;


                  dictionaryService.getCustomReports({"dataDomain": 'WEE', "country": 'UK')
                          .then(function ({data}) {
                            $scope.customReports = data.customReport; 
                      });

              }
          }
    };
})();

目标小部件:

<select class="form-control" required name="custom"
            ng-model="customFilters.custom.value"
            ng-options="c.reportUrl as c.reportName for c in customReports">

            <option value="" translate>_NONE_</option>
</select>

整个窗口控制器:

 $scope.customReports = [];

作为测试以确保我的目标小部件正在查看我在整个窗口控制器中尝试过的正确位置目标下拉列表中填充了frank和Joe。

$scope.customReports = [{reportUrl:'hello',reportName:'Frank'},{reportUrl:'hello2',reportName:'Joe'}];

为什么在ajax调用后没有填充下拉列表? (见编辑3)

编辑1:我删除了多余的ajax调用和条件         源小部件控制器的功能。希望能做到         它更容易看到。我的括号可能错了。

编辑2:我做了一些调试,源中的范围ID是47         在目标中它是50.我不知道这些数字是什么意思,         但它表明我没有将我的数据存储在同一个空间中。

编辑3:我修复它(只是尝试一切),但我不知道为什么 我将customReports数据移动到$ scope.customFilters.customReports,所以问题已经改为为什么这是工作!!!!

1 个答案:

答案 0 :(得分:1)

  

由于它的设计方式,每个下拉列表都有它自己的控制器,   与整个窗口的另一个。

这是关键!您已在$scope.customReports内定义wholeController,其范围与您的下拉列表不同。这就是你在$scope.customFilters.customReports内移动它后能够修复它的原因,这与下拉列表的范围相同。

来自angularjs documentation

  

每个AngularJS应用程序只有一个根作用域,但可能有   几个儿童范围。

这个blog详细解释了解Angularjs范围$ rootScope和$ scope。