AngularJS：当 ng-click 上的值发生变化时，ng-change 不起作用

Question

我创建了一些控制按钮来处理服务器端分页。它有 4 个按钮（第一页、上一页、下一页和最后一页），一个页面计数器，它是一个输入文本字段和一个下拉列表 select 您想要查看的行数。

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

我的问题是，当我使用其中一个控制按钮时，即使输入文本中的 vm.currentPage 发生变化，此功能也不会被触发。

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

下面我有一个示例代码，其中函数 setPagingData() 每次调用时都会将值递增 1。 Plnkr link: 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?

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

AngularJS：当 ng-click 上的值发生变化时，ng-change 不起作用

AngularJS: ng-change does not work when value changes on ng-click

angularjs

angularjs-ng-click

angularjs-ng-change

angular-ngmodel

使用 ngClick

使用 $scope.$watch