javascript - 如何执行每 3 秒返回数组项目的 ng-repeat

Question

我希望能够使用 ng-repeat 从数组中返回项目。

我想要的是一些动画效果，其中每个项目在前一个项目之后显示 3 秒。

这是一个 ng-repeat 示例，它在 3 秒延迟后返回结果。 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>