使用 angular ng-repeat 动画加载更多按钮

Question

我使用 ng-repeat 来显示数组中的一些数据，但是数据太大所以我使用 limit 和 ng-repeat 和更多按钮来从数组中加载更多项目。现在我想使用会产生扩展效果的动画。我该如何处理 angular 和 ng-animate？ Here 是我做的。

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>

Answer 1

这是一个有效的 jsBin

主要问题是，您需要在主模块中包含 ngAnimate 作为依赖项

使用 angular ng-repeat 动画加载更多按钮

Animated load more button with angular ng-repeat

angularjs

ng-repeat

ng-animate