3秒ごとに配列の項目を返すng-repeatを行う方法

Question

ng-repeatを使用して配列から項目を返すことができるようにしたい。

アニメーションエフェクトは、前のアイテムの3秒後に表示されるアニメーションエフェクトです。

ここでは、遅延が3秒後に結果を返すng-repeatの例を示します。 http://jsfiddle.net/98rbe9hc/

<div ng-controller="MyCtrl"> 
    <ul> 
    <li ng-repeat="phone in phones | filter:delay_filter"> 
    <span>Name : {{phone.name}}</span> 
    </li> 
    </ul> 
</div> 

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

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

myApp.controller('MyCtrl', function($scope, $timeout) { 
    var delayed = false; 
    $scope.phones = [ 
     { name: 'Motorola' }, 
     { name: 'Nokia' }, 
     { name: 'Ericsson' } 
    ]; 

    var delayInMilliseconds = 3000; 
    var doneWaiting = false; 
    $scope.delay_filter= function(item){ 
     return doneWaiting; 
    }; 

    $timeout(function() { 
     doneWaiting = true; 
    }, delayInMilliseconds); 
}); 

しかし、私はしたいが、前の項目の後に3秒を表示する配列内の各アイテムのためです。

Answer 1

HTML

<div ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="phone in phones" ng-if="count >= $index"> 
      <span>Name : {{phone.name}} {{count}} {{$index}}</span> 
     </li> 
    </ul> 
</div> 

<script> 
var myApp = angular.module('myApp',[]); 

     myApp.controller('MyCtrl', function($scope, $interval) { 
     var delayed = false; 
     $scope.phones = [ 
     { name: 'Motorola' }, 
     { name: 'Nokia' }, 
     { name: 'Ericsson' } 
    ]; 

    var delayInMilliseconds = 3000; 
    $scope.count = 0; 

     $scope.cunter = $interval(function() { 
      $scope.count+=1; 
      if($scope.count >= $scope.phones.length){ 
       $interval.cancel($scope.cunter); 
       console.log('end') 
      } 
     }, delayInMilliseconds); 
    }); 
</script> 

Answer 2

まず、あなたはとてもフィルタリピートを$intervalを使用する必要があります。また、各項目にdoneWaitingを追加して、フィルタ内の項目を確認してください。

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

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

myApp.controller('MyCtrl', function($scope, $interval) { 
    var delayed = false; 
    $scope.phones = [ 
     { name: 'Motorola', doneWaiting: false }, 
     { name: 'Nokia', doneWaiting: false }, 
     { name: 'Samsung', doneWaiting: false }, 
     { name: 'Ericsson', doneWaiting: false } 
    ]; 

    var delayInMilliseconds = 1000; 
    $scope.delay_filter= function(item){ 
     return item.doneWaiting; 
    }; 

    $scope.waitingInterval=$interval(function() { 
     for (i = 0; i < $scope.phones.length; i++) { 
      if(!$scope.phones[i].doneWaiting){ 
       $scope.phones[i].doneWaiting = true; 
       if(i==$scope.phones.length-1){ 
        $interval.cancel($scope.waitingInterval); 
       } 
       break; 
      } 
     } 
    }, delayInMilliseconds); 
});