代码之家 › 专栏 › 技术社区 › Olafvv

AngularJS:ng单击时值更改时,ng更改不起作用

angularjs-ng-change angularjs-ng-click angular-ngmodel angularjs

1

Olafvv · 技术社区 · 8 年前

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

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

下面是一个示例代码,函数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++;
}

1 回复 | 直到 8 年前

1

2

Teh 8 年前

如中所述 documentation ng-change

可用解决方案:

呼叫 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$看

观察变量的变化 vm.rowsPerPage

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