AngularJS：当 ng-click 上的值更改时，ng-change 不起作用答案

【问题标题】：AngularJS: ng-change does not work when value changes on ng-clickAngularJS：当 ng-click 上的值更改时，ng-change 不起作用
【发布时间】：2018-01-22 08:07:43
【问题描述】：

我创建了一些控制按钮来处理服务器端分页。它有 4 个按钮（首页、上一页、下一页和最后一页）、一个作为输入文本字段的页面计数器和一个用于选择要查看的行数的下拉菜单。

页面计数器在控制器中定义为 vm.currentPage，可以通过按钮操作或在输入中键入新值，下拉列表为 vm.rowsPerPage。对于这两个元素，我已经声明了一个 ng-change，其中包含一个最终必须获取数据的函数，称为 vm.setPagingData();

我的问题是，当我使用其中一个控制按钮时，这个函数没有被触发，即使输入文本中的 vm.currentPage 正在改变。

直接更改输入中的值或使用下拉列表选择我想查看的行数时没有问题。

下面我有一个示例代码，其中函数 setPagingData() 每次调用时都会将一个值递增 1。 Plnkr 链接：http://plnkr.co/edit/qHrTC9gkntSw9IfgeJ5T?p=preview

html:

<!--Back Buttons-->
<button ng-disabled="ctrl.currentPage <= 1" ng-click="ctrl.currentPage = 1;"> << </button>
<button ng-disabled="ctrl.currentPage <= 1" ng-click="ctrl.currentPage = ctrl.currentPage - 1"> < </button>

<!--Current page count-->
<span><input type="text" ng-model="ctrl.currentPage" ng-change="ctrl.setPagingData()" /> of {{ctrl.totalPages}}</span>

<!--Next buttons-->
<button ng-disabled="ctrl.currentPage >= ctrl.totalPages" ng-click="ctrl.currentPage = ctrl.currentPage + 1;"> > </button>
<button ng-disabled="ctrl.currentPage >= ctrl.totalPages" ng-click="ctrl.currentPage = ctrl.totalPages;"> >> </button>

<br><br>

    Show:
    <select ng-model="ctrl.rowsPerPage" ng-change="ctrl.setPagingData()">
        <option value="10" ng-selected="ctrl.rowsPerPage === '10'">10 rows</option>
        <option value="20" ng-selected="ctrl.rowsPerPage === '20'">20 rows</option>
        <option value="40" ng-selected="ctrl.rowsPerPage === '40'">40 rows</option>
        <option value="60" ng-selected="ctrl.rowsPerPage === '60'">60 rows</option>
    </select>

<br><br>
{{ctrl.test}}

控制器：

vm.currentPage = 1;
vm.totalPages = 16;
vm.rowsPerPage = "20";

vm.test = 0;

vm.setPagingData = function(){
  vm.test++;
}

我应该在控制器内部而不是在 ng-change 内部定义按钮的逻辑吗？或者有没有办法将它保存在 HTML 中？

【问题讨论】：

ng-change 仅用于手动用户输入。使用$scope.$watch 或从内部调用vm.setPagingData() ng-click
嗯，那是有道理的。我将使用 ng-click 中的功能。如果您可以将此作为答案，我会将其标记为已回答

标签： angularjs angular-ngmodel angularjs-ng-click angularjs-ng-change

【解决方案1】：

如documentation中所述，ng-change在用户手动更改输入字段的值时触发。

可用的解决方案：

使用 ngClick

在按钮的ng-click 内调用ctrl.setPagingData()

<button ng-click="ctrl.currentPage = ctrl.currentPage + 1; ctrl.setPagingData();" ng-disabled="ctrl.currentPage >= ctrl.totalPages"> > </button>
<button ng-click="ctrl.currentPage = ctrl.totalPages; ctrl.setPagingData();" ng-disabled="ctrl.currentPage >= ctrl.totalPages"> >> </button>

使用 $scope.$watch

注意变量vm.rowsPerPage的变化：

$scope.$watch(function() {
  return vm.rowsPerPage;
}, function() {
  vm.setPagingData();
});

【讨论】：