如何使用 ng-model 显示输入元素的不同值?

2023-12-27

在控制器中,如果有一个变量用于跟踪分页表页面的索引(从 0 开始):

var page {
  pageNumber: 0;
}

问题:我怎样才能显示这个pageNumberhtml 中的变量,但总是增加+1? (因为index=0页面显然是第一页,因此应该显示为Page 1)

<input type="text" ng-model="page.pageNumber">

此外,当模型更新时,输入中的值应该自动更改(同样:也增加 +1)。


我认为这是 $formatters 和 $parsers 的一个用例。它们对模型的属性进行操作,无需在模型上创建虚拟属性。文档here https://docs.angularjs.org/api/ng/type/ngModel.NgModelController。如果这不是 $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;
            })   
        }
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 ng-model 显示输入元素的不同值? 的相关文章

随机推荐