Question

我已经创建了一些控制按钮来处理服务器端分页。它有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中？

Answer 1

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

可用解决方案：

使用ngClick

在按钮的ctrl.setPagingData()内拨打ng-click

<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-change在ng-click

1 个答案:

使用ngClick

使用$ scope。$ watch