AngularJS

Question

问题背景：

我正在学习 AngularJS。我创建了一个简单的应用程序，它接受 3 个表单输入，并且在提交此表单时应该呈现一个分页列表。我对 UI-Bootstrap 有依赖性。这是一个 Plnkr，显示了我试图合并到我的应用程序中的分页示例：http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

问题与演示：

这是我目前在 CodePen 上的代码 link：

http://codepen.io/daveharris/pen/NNMQyy

我在我的 SearchingService 模型中填充了 1000 个项目的列表，这些项目被注入并在两个控制器之间共享。

当 SearchingService 模型上的 searchingService.searchList 列表更改时，我无法让分页 ng-repeat 填充，好像$scope.Watch没有被触发。

任何帮助查明这一点的人都将不胜感激。

Answer 1

将第 31 行从 $watch 更改为 $watchCollection。由于您的服务正在改变数组（通过 .push），引用保持不变，因此 $watch 不会触发。 $watchCollection 将监视对数组 members 的引用，而不是对 array 本身的引用。

Answer 2

正如 bchemy 指出的那样，$watch 应该更改为 $watchCollection。但此更改不足以使您的应用程序与当前代码一起正常工作，因为分页看起来已损坏。

您还应该添加另一个观察者来控制分页，作为您要复制的示例中的观察者：

$scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredItems = $scope.searchingService.searchList.slice(begin, end);
  });

另外 $scope.items 数组在其中变得重复 searchLists 并且会弄乱分页长度。

我创建了这个 Plunker，您可以在其中看到您的示例完全正常工作。

AngularJS - 在 $scope.Watch 更改时不呈现分页（包括 CodePen）

AngularJS - Pagination not rendering on $scope.Watch change (CodePen included)

javascript

angular-ui-bootstrap