控制ng-repeat迭代

Question

HTML : HTML：

<div ng-repeat="data in $ctrl.list">
    <div ng-init="$ctrl.applyAction(data)">
        <h4>{{data.name}}</h4>
        <ul ng-if="data.steps">
            <li ng-repeat="step in data.steps">{{step.name}}</li>
        </ul>
    </div>
</div>

Controller : 控制器：

$onInit() {
    this.list = [{
        name: "First Obj"
    }, {
        name: "Second Obj"
    }, {
        name: "Third Obj"
    }, {
        name: "Fourth Obj"
    }];
}

applyAction(data) {
    this.someHttpService.getResponse(data).then(function(success) {
        data.reqForSecondServiceCall = success.data;
        this.secondServiceCall(data);
    }, function(error) {
        // console.log(error);
    });
}

secondServiceCall(data) {
    this.someHttpService.getSecondServiceResponse(data).then(function(success) {
        data.status = success.data;
    }, function(error) {
        // console.log(error);
    });
}

Currently ng-repeat will be iterating through the list object irrespective of the service calls made on each object (asynchronous). 当前，ng-repeat将遍历列表对象，而不管对每个对象进行的服务调用（异步）。

And the desired functionality is to render the current object only when the applyActions method is completed on previous object. 所需的功能是仅在对上一个对象完成了applyActions方法后才呈现当前对象。

Answer 1

One solution is to queue the calls in an event queue and then invoke the events one by one when previous call is completed 一种解决方案是将调用排队在事件队列中，然后在上一次调用完成后逐个调用事件

 angular.module('myApp',[]).controller('myCtrl', function($scope, $http, $timeout){ $scope.title = 'welcome'; $scope.finishedEvent = ''; $scope.eventQueue = []; $scope.list = [{ name: "First Obj" }, { name: "Second Obj" }, { name: "Third Obj" }, { name: "Fourth Obj" }]; $scope.applyAction = function(data, index) { //declare the event var event = function(){ var testApi = "https://jsonplaceholder.typicode.com/posts"; $http.get(testApi).then(function(response) { data.steps = response.data.slice(0,2); $scope.finishedEvent = data.name; }, function(error) { console.log(error); }); }; if(index == 0){ event(); }else{ $scope.eventQueue.push(event); } }; $scope.$watch('finishedEvent', function(){ if($scope.eventQueue.length > 0){ $timeout(function(){ console.log($scope.finishedEvent + '- loaded') var event = $scope.eventQueue[0]; $scope.eventQueue.splice(0, 1); //remove current event from queue event(); }, 1000); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <h1>{{title}}</h1> <div ng-repeat="data in list"> <div ng-init="applyAction(data, $index)"> <h4>{{data.name}}</h4> <ul ng-if="data.steps"> <li ng-repeat="step in data.steps">{{step.title}}</li> </ul> </div> </div> </body>

NOTE 1: I used a dummie api just to have live data 注意1：我使用了dummie api来获取实时数据

NOTE 2: Remove the $timeout, only added it to make the example clear 注意2：删除$ timeout，仅添加它以使示例清晰明了

Here's a plunker with the example 这是一个例子

控制ng-repeat迭代

问题描述

1 个解决方案

解决方案1
0 2017-11-07 20:46:45

控制ng-repeat迭代

问题描述

1 个解决方案

解决方案1 0 2017-11-07 20:46:45

解决方案1
0 2017-11-07 20:46:45