Angularjs引导分页设置页面未触发页面更改答案

【问题标题】：Angularjs bootstrap pagination set page is not triggering page changeAngularjs引导分页设置页面未触发页面更改
【发布时间】：2014-10-24 15:51:25
【问题描述】：

我有以下分页代码

<pre>There are {{total_records}} number of records</pre>
<pagination ng-model="current_page"
            total-items="total_records"
            items-per-page="items_per_page"
            max-size="max_size" class="pagination-sm"
            boundary-links="true" rotate="false"
            num-pages="numPages" ng-change="pageChanged()">
</pagination>

当我通过单击 DOM 更改分页时，它可以工作。但是当我尝试通过在代码中设置 $scope.current_page 来更改分页时，它不会触发 pageChanged。

例如，

在 DOM 上，假设我在第 3 页（$scope.current_page 为 3）并且在 DOM 上第 3 页处于活动状态。如果我通过单击 DOM 转到第 4 页，则在 DOM 第 4 页上处于活动状态，$scope.current 更改为 4，并触发 pageChagned。

但是

在 DOM 上，假设我在第 3 页（$scope.current_page 为 3）并且在 DOM 上第 3 页处于活动状态。如果我通过在代码中将 $scope.current_page 更改为 4 进入第 4 页，那么在 DOM 页面更改更改为 4 但 pageChanged 没有被触发。

如何在代码中更改 $scope.current_page 时触发 pageChanged？当他们建议使用 $scope.$watch 时，我看到了另一种解决方案，但我想知道更好的方法。

编辑：

我创建了以下 plnkr（我第一次使用它，所以不确定我是否做得正确）。 http://plnkr.co/edit/Kldv7ZbexpgifiPIsjCT?p=preview

您可以看到的问题是，当您单击“转到第 3 页”按钮时，<pre></pre> 标签上的“页码”不会改变。

谢谢

【问题讨论】：

你能展示更多的js代码吗？幸运的是，我现在正在研究分页，也许你也可以帮助我。 :)
创建了一个 plnkr 并进行了更新。我第一次使用 plnkr，希望我做得对。
只需添加 ($scope.number_of_change)++;在 setPage 函数中 ??每次单击该按钮转到第 3 页时，这将增加页面更改的计数（我希望这就是您想要的）
这是你想要的吗？ plnkr.co/edit/jDODdXvrpZ9jfP2XG0jB?p=preview
可以做到，但我在想，更改 current_page 后应该触发页面更改。由于我已经拥有一个处理页面更改的函数，为什么我应该在 setPage() 中重复相同的代码。

标签： javascript angularjs twitter-bootstrap pagination angular-bootstrap

【解决方案1】：

ng-change 不是由代码更改触发的。在控制器中使用 $scope.$watch 可以得到想要的效果：

$scope.$watch(function() {
    return $scope.current_page;
}, function() {
    $scope.number_of_change++;
});

updated plnkr

（老实说，这是Angular - ng-change not firing when ng-model is changed 的副本，它有一个more thorough answer，但我没有足够的声誉来标记这个问题。）

【讨论】：