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>