带有角度ng-repeat

Question

我使用ng-repeat来显示数组中的一些数据，但数据太大，所以我使用了ng-repeat和更多按钮限制从数组加载更多项目。现在我想使用能够实现扩展的动画。我如何处理角度和动画？ 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作为依赖项