mem*_*und 12 javascript angularjs
在控制器中,如果有一个跟踪分页表的索引(从0开始)的变量:
var page {
pageNumber: 0;
}
问题:如何pageNumber在html中显示此变量,但总是增加+1？(因为索引= 0页显然是第1页,因此应显示为Page 1)
<input type="text" ng-model="page.pageNumber">
此外,当模型更新时,输入中的值应自动更改(再次:也增加+1).
我认为这是$ formatters和$ parsers的用例.它们在模型的属性上运行,不需要在模型上创建虚拟属性.文档在这里.如果这不是$ formatters和$ parsers的用例,请更正我.
请看下面.
HTML标记
<body ng-app="app" ng-controller="mainCtrl">
{{page}}
<input paginated-index type="text" ng-model="page">
</body>
JS
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.page = 0;
});
app.directive('paginatedIndex', function()
{
return{
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelController)
{
ngModelController.$formatters.push(function(value)
{
return value+1;
})
ngModelController.$parsers.push(function(value)
{
return value-1;
})
}
}
});
在控制器中,将页面对象更改为:
$scope.page = {
displayedPage: function(num) {
if(arguments.length) {
$scope.page.pageNumber = num - 1;
return num;
} else {
return $scope.page.pageNumber + 1;
}
},
pageNumber: 0
}
然后你对此有所了解:
<input type="text" ng-model="page.displayedPage" ng-model-options="{ getterSetter: true}" />
这将显示页码加1,但保留实际的page.pageNumber变量应该是它应该的样子.
getterSetter: true我添加的选项将模型绑定到getter/setter函数,它允许您传入参数 - 在这种情况下,输入您输入的页码 - 并从该函数返回.您可以在ngModel的文档中阅读有关此内容的更多信息
| 归档时间： |
|
| 查看次数： |
6111 次 |
| 最近记录： |