Javascript AngularJS:获取筛选的ng重复结果计数以更新我的分页

我的代码解释：

下面是一个带有

ng repeat

的简单表格，它在

ctrl.persons

中循环，并将结果存储在变量

ctrl.results

中。包含一个过滤器，允许用户使用文本输入搜索结果，

sliceResults

是my的自定义过滤器（它根据分页的当前页面确定要显示的结果的偏移量和限制）

{{$index+1}}
{{result.firstName}
{{result.lastName}
结果：{ctrl.Results.length}

情况：

在代码末尾，

ctrl.results.length

实时返回结果量，并在用户填写文本输入以搜索结果时相应更改

但是，当结果量发生变化时，我的分页不会相应地发生变化，因此显示的页数不正确（例如，它仍然可以显示3页，而只有1页）。页数基于控制器中的变量（

this.paginationtalItems

）

问题：

当视图中的结果量（

ctrl.results.length

）发生变化时，如何更新控制器中的变量

this.paginationtalItems

？（或者，有什么替代方法来更新我的分页？）

我的尝试：

我远不是一个AngularJS专家，所以不要嘲笑我！我尝试将一个函数放入带有结果计数的

ng change

，但失败了，因为它显然需要

ng model

，我看不到使用

ng repeat

我还尝试在

ctrl.results

变量上使用

$watch

，但这导致了一个巨大的控制台错误，因为它在x次迭代后中止。另外，我不想使用

$watch

，因为我读到它只适用于

$scope

，我不想使用它（我使用“controller as”语法）

---

提前感谢，我将接受帮助我解决问题的答案。

您可以在控制器中使用带有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
    });
    ....
});

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);
    }
}

编辑：好的，我刚刚想到了另一种方法，您不必使用

$scope

。它在控制器上包含一个函数，并使用

ng init

调用该函数，该函数将更新变量（

ng init

将在迭代列表每次更改时激发）：

因此，经过大量简化后，控制器将如下所示：

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

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>

{{result}}
{{ctrl.paginationTest}

---

下面是一个例子，看看第二列，看看它在输入元素中的每次更改后都会发生变化。在您的情况下，您只需重新计算

ctrl.paginationtalitems

我知道这个问题得到了回答，但我想分享我的经验

我在使用@Omri Aharon建议的

ng init

时遇到了一些问题，因为每次我更改文本输入中的值时，它都没有调用函数，我只是将

ng init

从

中删除，并将

ng change=“ctrl.calcPagination（）”

添加到输入中，就解决了这些问题

HTML代码如下所示：

<tbody>
  <div class="input-group">
    <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span>
    <input type="text" class="form-control" placeholder="Filter..." ng-model="ctrl.filterName" ng-change="ctrl.calcPagination()">
  </div>
  <tr ng-repeat="item in ctrl.list | filter: ctrl.filterName | orderBy: ctrl.sortType:ctrl.sortReverse | clientPaginator:ctrl.currentPage:ctrl.itemsPerPage">
    <td>{{item.property}}</td>
  </tr>
</tbody>

---

感谢@Omri Aharon提供这个简单的解决方案

谢谢你的回答。是的，您的

$watch

似乎工作正常！我一定是把我的搞砸了。但是，有没有一种方法可以在没有

$watch

的情况下实现这一点？我的控制器中没有

$scope

（我可以添加它，但我宁愿不添加）。@Nic实际上，可能有。。只是想到了另一种可能适合你的方法。让我马上更新答案。@Nic更新了答案。