Question

我正在处理一个包含2个选择列表的页面，每个列表都由来自REST服务的调用填充：

  var mainApp = angular.module('taxonomyViewer', []);

    mainApp.controller('apiTaxonomyController', function ($scope, $http) {

        $scope.taxonomyList = []; // the taxonomy list for the first select list
        $scope.taxonomyStates = []; // the state list for the taxonomy selected in the first list

        $http({
            method: 'GET',
            url: '/api/reports/taxonomies'
        }).then(function (response) {
            $scope.taxonomyList = angular.fromJson(response.data);
            console.log($scope.taxonomyList);
        });

        $scope.update = function () {
            $http({
                method: 'GET',
                // api/reports/taxonomies/{ent_id}/states
                url: '/api/reports/taxonomies/' + $scope.selectedItem + '/states'
            }).then(function (response) {
                $scope.taxonomyStates = angular.fromJson(response.data);
                console.log($scope.taxonomyStates);

            });
            console.log("selected item: " + $scope.selectedItem);
        };

我的选择列表在这里：

 <div class="col-md-4">
    <div ng-app="taxonomyViewer" ng-controller="apiTaxonomyController">
        <select ng-model="selectedItem"
                ng-options="items.ent_id as items.ent_desc for items in taxonomyList"
                ng-change="update()">
            <option value=""> Select Taxonomy </option>
        </select>

    </div>
    <br />
    <div ng-app="taxonomyViewer" ng-controller="apiTaxonomyController">
        <select ng-model="selectedState"
                ng-options="items.ens_guid as items.enk_name + ' - ' + items.sg_name for items in taxonomyStates"
                ng-change="updateState()">
            <option value=""> Select Taxonomy State </option>
        </select>

        <br />
    </div>
    <div id="taxonomyTree" class="fancytree-fade-expander">
    </div>

</div>

当您从第一个列表中选择一个项目时，将调用REST服务，然后填充第二个列表。从$ scope.update函数内部调用REST服务，但是选择列表没有加载$ scope.taxonomyStates项。

Answer 1

您将应用程序和控制器连接两次 - 这会创建两个应用程序和两个控制器。

当您的update方法获取数据时，它会将其分配给应用1上的taxonomyStates，因为这是调用update的位置。但是应用程序2是试图显示它的人。

ng-app="taxonomyViewer" ng-controller="apiTaxonomyController"

这些属性应该在它们有意义的最高DOM元素上。基于此示例 - 我会说ng-controller应该放在col-md-4 div上，而ng-app几乎应始终位于body或正下方的元素上

角度选择刷新更改

1 个答案: