我希望能够使用 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 秒显示。
最佳答案
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>
关于javascript - 如何执行每 3 秒返回数组项目的 ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38950158/