如何使用ng模型显示输入元素的不同值

How to show different value of input element with ng-model?

本文关键字：元素 输入 何使用 ng 模型 显示      更新时间：2023-09-26
在

控制器中，如果有一个变量来跟踪分页表页面的索引（从 0 开始）：

var page {
  pageNumber: 0;
}

问题：如何在 html 中显示这个pageNumber变量，但总是递增 +1？（因为 index=0 页面显然是第 1 页，因此应显示为 Page 1 ）

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

此外，当模型更新时，输入中的值应自动更改（再次：也递增 +1）。

我认为这是$formatters和$parsers的用例。它们对模型的属性进行操作，无需在模型上创建虚拟属性。文档在这里。如果这不是$formatters和$parsers的用例，请纠正我。

请看下文。

网页标记 

<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

$scope.data=$scope.page.pageNumber+1; $scope.fuc=function(){ $scope.page.pageNumber=$scope.data-1; };

你的 HTML 会像 

    <input type="text"  ng-model="data" ng-change="fuc()" >

检查这个 plunk Plunker

相关文章：