javascript - Angularjs 在数据准备好时进行评估

Question

我正在开发我的第一个带有 .Net 后端的 Angular 应用程序。

我使用 http.post 从 webmethod 异步获取数据。一切都很好。客户端我想做一些简单的计算(表中的最后一行包含表中所有数据的总和)

执行此操作的代码非常简单，但我的问题是当我尝试执行此操作时数据尚未准备好。

我读到我可以使用 promise 和服务或工厂。但我不确定我们最好的方法是什么。

我的 View 代码:

<div ng-controller="taskCtrl as ctrl"> 
<div class="col-md-10 container outer">
<h1 class="center-block">{{ctrl.SprintViewModel.SprintName}}</h1>
    <table id="SprintMetaDate">
        <tr><td>Projekt:</td><td>{{ctrl.SprintViewModel.ProjektName}}</td></tr>
        <tr><td>Periode:</td><td>{{ctrl.SprintViewModel.StartDate}} - {{Ctrl.SprintViewModel.EndDate}}</td></tr>
        <tr><td>Udarbejdet af/d:</td><td>{{ctrl.SprintViewModel.MadeBy}}</td></tr>
    </table>

    <h3>Sprint Resume:</h3>
    <br/>
    {{ctrl.SprintViewModel.SprintResume}}
    <h3>Sprint afslutning:</h3>
    {{ctrl.SprintViewModel.SprintDemo}}

    <h2>Scope og Økonomi </h2> 
    <h3>Sprint Opgaver</h3> 


    <table id="SprintTasks" class="col-md-12">
        <tr><th>Opgave</th><th>Estimat</th><th>Forbrug</th><th>Udest.</th><th>*</th><th>Pris (DKK)</th></tr>
        <tr ng-repeat="x in ctrl.SprintViewModel.Tasks">
            <td style="width: 40%">{{ x.Description }}</td>
            <td>{{ x.TimeEst }}</td>
            <td>{{ x.TimeUsed }}</td>
            <td>{{ x.TimeRemaining }}</td>
            <td>{{ ctrl.CalcPrecisionOfEstimat(x.TimeUsed,x.TimeRemaining,x.TimeEst) | number:2}} %</td>
            <td>{{x.Price}}</td>
        </tr>
        <tr>
            <td>Ialt</td>
            <td>{{ ctrl.TotalEstimat() }}</td>
            <td>{{ ctrl.TotalTimeUsed() }}</td>
            <td>{{ctrl.TotalTimeRemaining()}}</td>
            <td>{{ctrl.TotalPrecision()}}</td>
            <td>{{ctrl.TotalPrice()}}</td>
        </tr>
    </table>
        * Forbrug + Udestående i forhold til estimat

    <br/>

    Udestående opgaver er planlagt ind i næstkommende sprint.
    </div>


</div>
</form>
 <script>
    var app = angular.module('myApp', []);
    app.controller('taskCtrl', function($scope, $http) {
        var ctrl = this;
        ctrl.SprintViewModel = null;


        ctrl.TotalEstimat=function() {
            var totalEstimat=0;
           for (i=0; i<ctrl.SprintViewModel.Tasks.count;i++) {
                totalEstimat += ctrl.SprintViewModel.Tasks[i].Estimate;
            }
            return totalEstimat;
        }


        ctrl.TotalPrecision = function () {
            var totalPrecision=0;
            angular.forEach(ctrl.SprintViewModel.Tasks, function (value, key) {
                totalPrecision += Number(value);


            });

        $http.post('SprintRapport.aspx/GetSprintViewModel', {})
            .then(function(response, status, headers, config) {
                console.log("I success");
                ctrl.SprintViewModel = response.data.d;                  
            });           
    });`

正如已经提到的，每次在最后一行中的所有方法上进行页面加载时，我都会得到一个空引用，因为 ctrl.SprintviewModel 未定义。为了简单起见，我只包含了其中一种方法，所有这些方法的问题都是相同的。

所以我的问题是如何确保首先调用 ctrl.TotalEstimat() 然后分配 ctrl.SprintViewModel ？

Answer 1

您可以添加ng-if状态到最后<tr>当数据准备好填充到 Controller 中时，它解析为 true。所以你可以定义$scope.loading = false最初，一旦您的代码准备好填充，您可以设置 $scope.loading=true这将在内部调用 $digest 循环，并且您的 View 将被更新。