Angular ngrepeat和带滤波器的寻呼

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

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

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

至于我的问题，我很困惑什么会被认为是'棱角分明'的方式来解决我的问题。我看到实现这种动画的唯一真正方法是渲染多个div，每个div都有一定的宽度并在它们之间执行滚动。但是，这并不真正使用ng过滤器的功能。我也遇到了ng-animate类，但不知道如何用它实现分页效果。

任何人都可以请直接给我一个正确的'棱角分明的'思路/解决方案吗？

来源

2015-09-26 vondip

如果你希望它是一个

<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-点击呼叫函数检索下一页数据并将其附加到MyDataArray

来源

2015-09-27 09:57:05

Angular ngrepeat和带滤波器的寻呼

回答

相关问题