Question

我正在使用angular的ng-repeat来呈现非常大量的信息。为了解决这个问题，我开始使用过滤器。

我现在尝试将它全部包装在一个角度指令中，该指令将使用ng-repeat和ng-filter处理分页，仅显示Y个Y结果。（结果100，显示20-30）。

我试图以类似的方式呈现它，你会在iPhone上遇到分页（页面数量表示为点，点击会导致动画滚动到另一页）。

关于我的问题，我对那些被认为是解决问题的“棱角分明”方式感到难过。我看到实现这个动画的唯一真正方法是渲染几个div，每个div都有一定的宽度并在它们之间执行滚动。但是，这并没有真正使用ng-filter的功能。我也遇到过ng-animate类，但不知道如何用它实现分页效果。

有谁能请我指出正确的'棱角分明'思路/解决方案？

Answer 1

如果你想成为一个

<div class="list-group" ng-init="quantity=100">
<div class="list-group-item pagingDiv" ng-cloak ng-repeat="(key,item) in MyDataArray| limitTo:quantity">
  .....
</div>
<div class="list-group-item list-group-item-success">
   <button class="btn-block btn btn-primary" ng-click="quantity= quantity + 100">MORE.....</button>
</div>

对于CSS：

<style type="text/css">
    .pagingDiv.ng-enter /*, .pagingDiv.ng-leave*/ {
        -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .pagingDiv.ng-enter, .pagingDiv.ng-leave.ng-leave-active {
        opacity: 0;
    }

        .pagingDiv.ng-leave, .pagingDiv.ng-enter.ng-enter-active {
            opacity: 1;
        }

    /*.pagingDiv.ng-leave-stagger, .pagingDiv.ng-move-stagger,*/ .pagingDiv.ng-enter-stagger {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        -webkit-transition-duration: 0;
        transition-duration: 0;
    }
</style>

但对于大数据，我建议更换ng-click以调用检索下一页数据的函数并将其附加到MyDataArray

使用过滤器进行角度ngrepeat和分页

1 个答案: