如何用ng-model显示输入元素的不同值？
[英]How to show different value of input element with ng-model?
问题描述
In the controller if have a variable that tracks the index (starting at 0) of the page for a pagination table: 
在控制器中，如果有一个跟踪分页表的索引（从0开始）的变量：
var page {
pageNumber: 0;
}
Question: how can I show this pageNumber variable in the html, but always incremented by +1? 问题：如何在html中显示此pageNumber变量，但总是递增+1？ (as the index=0 page is obviously the 1st page and should thus be shown as Page 1 ) （因为索引= 0页显然是第1页，因此应显示为Page 1 ）
<input type="text" ng-model="page.pageNumber">
Also, when the model gets updated, the value in the input should automatically change (again: also incremented by +1). 此外，当模型更新时，输入中的值应自动更改（再次：也增加+1）。
3 个解决方案
解决方案1
9 已采纳 2016-02-10 12:11:44
I think this is a use-case for $formatters and $parsers. 我认为这是$ formatters和$ parsers的用例。 They operate on the model's property and there is no need to create a dummy property on the model. 它们在模型的属性上运行，不需要在模型上创建虚拟属性。 Documentation here . 文档在这里 。 Please correct me if this is not the use case for $formatters and $parsers. 如果这不是$ formatters和$ parsers的用例，请更正我。
Please see below. 请看下面。
HTML markup HTML标记
<body ng-app="app" ng-controller="mainCtrl">
{{page}}
<input paginated-index type="text" ng-model="page">
</body>
js 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;
})
}
}
});
解决方案2
7 2016-02-10 09:54:37
In your controller, change your page object to this: 在控制器中，将页面对象更改为：
$scope.page = {
displayedPage: function(num) {
if(arguments.length) {
$scope.page.pageNumber = num - 1;
return num;
} else {
return $scope.page.pageNumber + 1;
}
},
pageNumber: 0
}
And then yourelement to this: 然后你对此有所了解：
<input type="text" ng-model="page.displayedPage" ng-model-options="{ getterSetter: true}" />
This will display the page number plus 1, but leave the actual page.pageNumber variable the way it should be. 这将显示页码加1，但保留实际的page.pageNumber变量应该是它应该的样子。
The getterSetter: true options I've added in will bind the model to a getter/setter function, which allows you to pass in the argument - in this case, your entered page number - and return from that function. 我添加的getterSetter: true选项将模型绑定到getter / setter函数，该函数允许您传入参数 - 在本例中为输入的页码 - 并从该函数返回。 You can read more information on this in the documentation for ngModel 您可以在ngModel的文档中阅读有关此内容的更多信息
解决方案3
2 2016-02-10 10:33:40
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.