2015-12-06 64 views
1

我用ng-repeat來顯示數組中的一些數據,但數據太大了,所以我用ng-repeat和更多按鈕來加載數組中的更多項。現在我想要使用會擴大效果的動畫。我如何處理angular和ng-animate? Here就是我所做的。動畫加載更多按鈕ng-repeat

var myApp = angular.module('myApp', []); 
 
myApp.controller('myController', function($scope) { 
 
    $scope.countries = [ 
 
    "ut", 
 
    "duis", 
 
    "enim", 
 
    "deserunt", 
 
    "ea", 
 
    "in", 
 
    "in", 
 
    "deserunt", 
 
    "ad", 
 
    "tempor", 
 
    "mollit", 
 
    "nisi", 
 
    "dolor", 
 
    "exercitation", 
 
    "ex", 
 
    "excepteur", 
 
    "nisi", 
 
    "irure", 
 
    "nostrud", 
 
    "aliqua", 
 
    "voluptate", 
 
    "nisi", 
 
    "anim", 
 
    "dolore", 
 
    "magna", 
 
    "Lorem", 
 
    "commodo", 
 
    "exercitation", 
 
    "consequat", 
 
    "cillum", 
 
    "elit", 
 
    "elit", 
 
    "pariatur", 
 
    "sit", 
 
    "fugiat", 
 
    "anim", 
 
    "aliquip", 
 
    "consectetur", 
 
    "excepteur", 
 
    "in", 
 
    "commodo", 
 
    "do", 
 
    "mollit", 
 
    "exercitation", 
 
    "duis", 
 
    "duis", 
 
    "sit", 
 
    "aute", 
 
    "sint", 
 
    "sunt", 
 
    "exercitation", 
 
    "occaecat", 
 
    "culpa", 
 
    "sit", 
 
    "commodo", 
 
    "esse", 
 
    "incididunt" 
 
] 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myController"> 
 
    <ul ng-init="limit=5"> 
 
     <li ng-repeat="country in countries |limitTo:limit track by $index">{{country}}</li> 
 
     <li> 
 
     <button ng-click="$parent.limit=countries.length" ng-if="limit==5"> 
 
      More 
 
     </button> 
 
     <button ng-click="$parent.limit=5" ng-if="limit!=5"> 
 
      Less 
 
     </button> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

回答

2

這裏是一個工作jsBin

的主要問題是,你需要包括ngAnimate爲您的依賴主模塊中