AngularJs 在 ngrepeat 中计算过滤的项目

Question

>我有一个嵌套的过滤列表，我想对它进行分页。因为过滤了项目总数，所以我正在尝试像这样设置 html 上的页面总数：

<div ng-repeat="group in filtered = (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">
    <h2>
        {{ group.label }}
    </h2>
    <ul>
        <!-- BEGIN: Inner ngRepeat. -->
        <li ng-repeat="friend in group.friends">
            {{ friend.name }}
             <button class="btn btn-small" type="button" ng-click="deleteItem(friend)">Delete</button>
        </li>
        <!-- END: Inner ngRepeat. -->
    </ul>
</div>
<!-- END: Outer ngRepeat. -->
<pagination rotate="true" num-pages="Math.ceil(filtered.length/pageSize)" current-page="currentPage" max-size="maxSize" boundary-links="true">
</pagination>

小提琴：http://plnkr.co/edit/SjQFkNvSVPUWolQv0KZY?p=preview

在指令属性上，我尝试使用表达式设置总页数，但出现不可分配模型表达式的错误......

[编辑]

为了更清楚一点，问题出在这一行：

<pagination rotate="true" num-pages="Math.ceil(filtered.length/pageSize)" current-page="currentPage" max-size="maxSize" boundary-links="true">
</pagination>

尝试计算表达式时：Math.ceil（filtered.length/pageSize）

[编辑]

正如匹诺曹建议的那样，我创建一个$scope。数学，然后 Math 函数可以从角度访问，但在 plunkr 中我收到此错误：不可分配的模型表达式：Math.ceil（groups.length/pageSize）（指令：分页），但在我的本地机器上，我没有在控制台中显示此错误。

我应该避免这种方法吗？

Answer 1

你的问题出在表达式中

<div ng-repeat="group in filtered = (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">

你应该像这样把filtered =拿出来

<div ng-repeat="group in (groups)|startFrom:(currentPage-1)*pageSize|limitTo:pageSize">

另外，因为 angular 无法访问Math所以您应该像这样将其应用于您的范围。

 $scope.Math = window.Math;

Answer 2

如果你像我一样偶然发现了这个答案，寻找这个问题标题的解决方案，我在这里找到了它： 如何显示过滤后的ng重复数据的长度

对我来说，这个例子的问题是理论上 OP 可以在他的分页中使用groups.length，对于我的用例，我正在做这样的事情：

ng-repeat="student in filtered = (activeStudents | filter:groupFilter | filter:query) | startFrom: (currentPage - 1) * itemsPerPage | limitTo:itemsPerPage"
<pagination direction-links="false" boundary-links="true" total-items="filtered.length" items-per-page="itemsPerPage" ng-model="currentPage">

我正在使用的startFrom过滤器是：

angular.module('app')
  .filter('startFrom', function() {
    return function(input, start) {
        if(input) {return input.slice(start);}
    };
});