Obasi Obeny Oj Obasi Obeny Oj - 3 months ago 7
AngularJS Question

How to do an ng-repeat that returns items of an array every 3 seconds

I want to be able to return items from an array using ng-repeat.

What I want is some animated effect, where each item is displayed 3 seconds after the previous item.

Here is an example ng-repeat that return results after 3 seconds delay.
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);
});


But what I want is for each item in array to be displayed 3 seconds after the previous item.

Answer

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>
Comments