使用淡入和延遲ng-repeat來顯示列表項

我想顯示列表項目一個接一個有一些延遲。對於我設法做這樣的事情：使用淡入和延遲ng-repeat來顯示列表項

$("#dropDownMenu li").each(function(i) { 
    $(this).delay(1000 * i).fadeIn(100); 
});

它的工作原理好當列表是一樣的東西

<li>one</li> 
    <li>two</li> 
    <li>three</li>

JSFiddle

但是，當我在列表中使用ng-repeat但這並沒有工作，像這樣的東西

<li ng-repeat="time in msg.time">{{time}}<li>

我該如何讓它工作k與ng-repeat？

來源

2017-07-05 Freddy

你解決了這個問題嗎？ – hasan

因爲，

的ngRepeat指令每個項目實例化一個模板一次從集合。

您將不得不手動爲每個項目添加一個$timeout延遲，將它們移動到所有項目的新範圍。

var app = angular.module("app", []); 
 

 
app.controller("ctrl", function($scope, $timeout) { 
 
    $scope.allItems = []; 
 
    $scope.items = ["first", "second", "third", "fourth", "fifth"]; 
 

 
    $timeout(function() { 
 
    $scope.delay(); 
 
    }, 1000); 
 

 
    $scope.delay = function() { 
 
    var dif = $scope.items.length - $scope.allItems.length; 
 
    var currentRow = $scope.allItems.length; 
 
    if (dif > 0) { 
 
     $scope.allItems.push($scope.items[currentRow]); 
 
    } 
 
    if ($scope.items.length > $scope.allItems.length) { 
 
     $timeout(function() { 
 
     $scope.delay(); 
 
     }, 1000); 
 
    } 
 
    $scope.$apply(); 
 
    } 
 

 
    $scope.getItems = function() { 
 
    return $scope.allItems; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body ng-app="app" ng-controller="ctrl"> 
 
    <ul ng-repeat="item in getItems()"> 
 
    <li>{{item}}</li> 
 
    </ul> 
 
</body>

來源

2017-07-05 08:27:15 Sajal

你應該通過一個與延遲通過$timeout添加項目之一：

angular.module('app', []) 
 
.controller('ctrl', ['$scope', '$timeout', function($scope, $timeout) { 
 
    var items = [ 
 
     'First', 
 
     'Second', 
 
     'Third', 
 
     'Fourth', 
 
     'Fifth' 
 
     ]; 
 
    
 
    $scope.items = []; 
 

 
    function showNext(array, index){ 
 
     $timeout(function(x){ 
 
     $scope.items.push(x); 
 
     if(++index < array.length) 
 
      showNext(array, index); 
 
     }, 1000, true, array[index]) 
 
    } 
 
    
 
    showNext(items, 0); 
 
     
 
}])

<script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 

 
<ul ng-app='app' ng-controller='ctrl'> 
 
    <li ng-repeat='item in items'>{{item}}</li> 
 
</ul>

來源

2017-07-05 08:29:08

我已創建了角動畫效果Plunkr例子。它的工作原理here

您應該根據您的angularjs版本將ng-animate源代碼添加到您的html中。

<script src="//code.angularjs.org/1.5.6/angular-animate.js"></script>

你可以在你的角度控制器使用的角度$timeout服務與jQuery $.each功能類似以下。

// CSS

.item.ng-enter 
{ 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity:0; 
} 
.item.ng-enter-active 
{ 
    opacity:1; 
}

// HTML

<li class="item" ng-repeat="time in msg.time">{{time}}<li>

//控制器

myApp.controller('ExampleController', ['$scope','$timeout', function($scope,$timeout) { 

    $scope.msg = msg = { 
     time : [] 
     }; 

    $scope.AddItem = function(){ 
     msg = { 
     time : ["option1","option2","option3","option4"] 
     } 

     $.each(msg.time, function(i){ 
     $timeout(function(){ 
      $scope.msg.time.push(msg.time[i]) 
     }, 1000*i); 
     }) 

    } 

    $scope.AddItem(); 



}]);

來源

2017-07-05 08:31:03 hasan

雖然這有效，但我希望其他角度開發人員完全拒絕這個解決方案。請使用角度方式 – devqon

@devqon感謝您的評論。我用ng-animate和$ timeOut服務更新了我的答案。它可以在https://plnkr.co/edit/d8SdEfSJlaseGXGtgIU8?p=preview中使用，因爲OP願望 – hasan

推薦的方式在角的動畫是通過使用ngAnimate模塊並使用ng-enter類：

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

HTML：

<ul> 
    <li class="item" ng-repeat="time in msg.time">{{time}}<li> 
</ul>

在CSS：

.item.ng-enter { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity:0; 
} 
.item.ng-enter-active { 
    opacity: 1; 
}

對於具有每個項目的超時出現，你應該看看@Slava Utesinov的答案。

來源

2017-07-05 08:43:33 devqon

使用淡入和延遲ng-repeat來顯示列表項

回答

相關問題