ng-repeat中的延迟

如何在每次ng-repeat迭代之间插入延迟，以便我的表将生成较慢的记录。有没有办法做到这一点，而不使用ngAnimate。ng-repeat中的延迟

<table> 
    <tr ng-repeat="x in records"> 
     <td>{{x}}</td> 
    </tr> 
</table>

来源

2017-04-23 cembo

[建议]

如果数据加载速度慢，也许是因为你欺骗了钥匙，所以对于测试它，你可以用轨道由$指数这样

尝试

<table> 
    <tr ng-repeat="x in records track by $index"> 
     <td>{{x}}</td> 
    </tr> 
</table>

[解决]

如果你仍然想控制NG重复的互动，最好是创建一个被操纵的动态变量随着时间的推移，那么你可以与所有记录的主阵列

$scope.records = [ 
    { 
     "name": "name1", 
     "data2": "data2.1", 
     "data3": "data3.1" 
    }, 
    { 
     "name": "name2", 
     "data2": "data2.2", 
     "data3": "data3.2" 
    }, 
    { 
     "name": "name3", 
     "data2": "data3.3", 
     "data3": "data3.3" 
    } 
    ];

那么你可以使用的setTimeout来调用传递从主阵列数据到另一最终数组的函数，每次互动索引

//start to proccess 
    setTimeout(function(){$scope.Result();},1000); 

//Here pass data from Records to FinalResult in each interaction 
    $scope.Result=function(){ 
    dif=$scope.records.length-$scope.FinalResult.length; 
    currentRow=$scope.FinalResult.length; 
    if(dif>0){ 
     $scope.FinalResult.push($scope.records[currentRow]); 
    } 
    if($scope.records.length>$scope.FinalResult.length){ 
     setTimeout(function(){$scope.Result();},1000); 
    }else{ 
    console.log('Finish Load'); 
    $scope.FinishRender=true; 
    } 
    //refresh 
    $scope.$apply(); 
    }

最后又用另一功能提供这种可变...

和HTML

<body> 
    <div ng-controller="recordsCtrl"> 
     <table style="border:1px solid black"> 
     <tr ng-repeat="x in getFinalResult()"> 
      <td>{{x.name}}</td> 
      <td>{{x.data2}}</td> 
      <td>{{x.data3}}</td> 
     </tr> 
    </table> 

    <div ng-if="FinishRender" style="color:red;font-weight:bold">Data Loaded!!!</div> 
    </div> 
    </body>

请随时在检查解决方案punkler

[可选]

你也可以使用一个指令来控制这样

myApp.directive('onFinishRender', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      console.log(element); 
      if (scope.$last === true) { 
         console.log('Finish Load'); 
      } 
     } 
    } 
});

最后互动

和html

<table> 
    <tr ng-repeat="x in getFinalResult()" on-finish-render="onFinishRender"> 
     .... 
     ... 
    </tr> 
</table>

注：我真的不知道，但我认为这是可以捕捉到用这种方法

来源

2017-04-23 10:26:43 marjes

在您的情况可能的解决方案可能是取源阵列和填充NG重复的每一次互动数组以延迟使用_.chunk和$ timeout，因此：

index.html 

<table> 
    <tr ng-repeat="x in records track by $index"> 
    <td>{{x}}</td> 
    </tr> 
</table> 

appCtrl.js 

$scope.sourceData = [data, data, data]; 
$scope.records = []; 

/** 
    *@param source (array): the array with the data used to populate the ng-repeat array 
    *@param target (array): the array to which ng-repeat points 
    *@param delay (integer): the render delay, in milliseconds 
    *@param renderSize (integer): the amount of list items to render between each delay 
    * 
**/ 
function delayedRender(source, target, delay, renderSize) { 
    var promise = $q.resolve(); 

    function scheduleRender(partial) { 
    Array.prototype.push.apply(target, partial); 

    // the timeout will ensure that your next render won't occur before the delay 
    return $timeout(function(){}, delay); 
    } 

    // _.chunk is a Lodash function that takes an array and chops it into smaller chunks. 
    // 'renderSize' is the size of these chunks. 
    var partials = _.chunk(source, renderSize); 
    var next; 

    // here we schedule renders to occur only after 
    // the previous render is finished through the use of $q promises 
    _.forEach(partials, function(partial) { 
    next = scheduleRender.bind(null, partial); 
    promise = promise.then(next); 
    }); 
}

来源

2017-09-29 14:44:05

ng-repeat中的延迟

回答

相关问题