javascript - AngularJS:获取过滤的 ng-repeat 结果计数以更新我的分页

Question

我的代码解释:

下面是一个带有 ng-repeat 的简单表格循环遍历 ctrl.persons , 并将结果存储在变量 ctrl.results 中.包含一个过滤器，允许用户使用文本输入搜索结果，sliceResults是我的 Angular-UI pagination 的自定义过滤器(它根据分页的当前页面确定要显示的结果的偏移量和限制)。

<table>
    <tr ng-repeat="result in ctrl.results = (ctrl.persons | filter:searchKeywords) | sliceResults: ctrl.paginationOffset : ctrl.paginationLimit">
        <td>{{ $index+1 }}</td>
        <td>{{ result.firstName }}</td>
        <td>{{ result.lastName }}</td>
    </tr>
</table>

Results : {{ ctrl.results.length }}

情况:

在代码的末尾，ctrl.results.length实时返回结果数量，并在用户填写文本输入以搜索结果时相应地发生变化。

但是，当结果数量发生变化时，我的分页并没有相应改变，因此显示的页数不正确(例如，它仍然可以显示 3 页，而只有 1 页)。页数基于我的 Controller 中的一个变量 ( this.paginationTotalItems )。

问题:

如何更新变量 this.paginationTotalItems在我的 Controller 中，一旦结果量(ctrl.results.length)在我看来发生变化？ (或者，有什么替代方法可以更新我的分页？)

我尝试了什么:

我远不是 AngularJS 专家，所以不要笑话我!我试图在 ng-change 中放置一个函数结果计数失败，因为显然它需要 ng-model我没有看到与 ng-repeat 一起工作.

我也尝试使用 $watch在 ctrl.results 上变量，但这会导致大量控制台错误，因为它在 x 次迭代后中止。另外，我不想使用 $watch因为我读过它只适用于 $scope ，我不想使用它(我使用“ Controller 作为”语法)。

提前致谢，我会接受有助于我解决问题的答案。

Answer 1

您可以在 Controller 中使用带有 controllerAs 语法的 $watch。我知道你说过这不是你的首要任务，但我认为这可能是你最好的解决方案。它看起来像这样:

.controller('myCtrl', function () {
    var ctrl = this;
    ...
    $scope.$watch(angular.bind(this, function () {
      return this.results.length;
    }), function (newVal) {
        ctrl.paginationTotalItems = //whatever logic you have
    });
    ....
});

编辑:好的，所以我想到了另一种您不必使用 $scope 的方法。它在您的 Controller 上包含一个函数，并使用 ng-init 调用它，这将更新您的变量(ng-init 将在每次迭代列表更改时触发):

经过大量简化后，您的 Controller 将如下所示:

function MyCtrl() {
    var ctrl = this;
    ctrl.paginationTest = 1;
    ctrl.persons = [1,2,3,4,5];

    ctrl.calcPagination = function () {
        ctrl.paginationTest = Math.floor(Math.random() * 10);
    }
}

HTML 将是:

<table>
          <input ng-model="searchKeywords"/>
        <tr ng-repeat="result in ctrl.results = (ctrl.persons | filter:searchKeywords)" ng-init="ctrl.calcPagination()">

            <td>{{ result }}</td>
            <td>{{ctrl.paginationTest}}</td>
        </tr>
    </table>

这是一个 Fiddle ，看一下第二列，它会在输入元素每次更改后发生变化。在您的情况下，您只需重新计算 ctrl.paginationTotalItems。