Question

我对angularjs很新，虽然它已经存在了一段时间。我决定将我的一些C ++ .NET代码转换为angularjs，并且我在动态更新表时遇到了麻烦。这是我的html页面

<div ng-controller="missionsController" ng-init="loadList()" class="inner">
<section>
    <div>
        <header class="major">
            <h1>
                <span>{{PageTitle}}</span>
            </h1>
        </header>
        <table>
            <tr>
                <td>S/N</td>
                <td>Region</td>
                <td>District Count</td>
                <td>Zone Count</td>
                <td>Branch Count</td>
                <td>Sub Branch Count</td>
                <td>Adult Attendance</td>
                <td>Children Attendance</td>
                <td>Total Attendance</td>
            </tr>
            <tr ng-repeat="x in adminLevelList">
                <td><span ng-if="$index != adminLevelList.length - 1">{{$index + 1}}.</span></td>
                <td>{{x.RegionName}}</td>
                <td>{{x.nDistricts}}</td>
                <td>{{x.nZones}}</td>
                <td>{{x.nBranches}}</td>
                <td>{{x.nSubbranches}}</td>
                <td>{{x.Attendance.AdultCount}}</td>
                <td>{{x.Attendance.AdultCount}}</td>
                <td>{{x.Attendance.AdultCount}}</td>
            </tr>
        </table>
    </div>
</section>

它是一个简单的表，用ng-repeat

显示数据

这是我的js代码

    'use strict';

angular.module("afmweca")
    .controller("missionsController", function ($scope, $stateParams, api) {

        $scope.loadList = function () {
            if ($stateParams.AL) {
                $scope.AL = $stateParams.AL;
                var AL = $scope.AL;
                api.getAllAdminLevelReport(AL)
                    .then(function (result) {
                        $scope.adminLevelList = result;
                        }
                    }, function (reason) {
                        $log.log("Operation Failed: " + reason);
                    });

                if (AL == 2) {
                    $scope.PageTitle = "Region List";
                }
                else if (AL == 3) {
                    $scope.PageTitle = "District List";
                }
                else if (AL == 4) {
                    $scope.PageTitle = "Zone List";
                }
                else if (AL == 5) {
                    $scope.PageTitle = "Branch List";
                }
                else if (AL == 6) {
                    $scope.PageTitle = "Sub Branch List";
                }
             }
        }

    });

该页面只是从名为API的HTTP服务加载数据，该服务对另一台服务器进行HTTP调用以获取要加载的数据。根据AL的值，返回的数据是不同的。但是，在第一次加载页面后，当AL的值发生变化时，表格不会使用新数据进行更新。我使用路线来改变AL的值。 HTTP调用返回新数据，但新数据未加载到 adminLevelList 中，表也不会更新。我在网上尝试了各种建议 - 包括apply，applySync等等 - 对我来说似乎不起作用。我想根据提供的值使用同一页面显示不同的数据集是错误的吗？我怎样才能克服这个问题？

感谢您的期待

Answer 1

问题出在您的apiService.js。您正在使用全局/共享承诺（defered）对象来解析和拒绝来自所有http服务电话的数据。

每个服务都应该拥有自己的promise对象，以便他们可以在响应可用时解析数据。

this.getAllAdminLevelReport = function (AL) {
      $log.log('API CALL (getAllAdminLevelReport(' + AL + ')...');

      /* use a local promise so that you get a new instance 
         for every method invocation*/

      var defered = $q.defer();

      // removing rest of the code for the sake of brevity. No change here

      return defered.promise;
}

更新angularjs中的模型和表格

1 个答案: