ngModel格式化程序和解析器

一尘不染

ngModel格式化程序和解析器

angularjs

我以不同的形式发布了相同的问题，但没有人回答。我没有清楚了解angular js中Formatter和Parsers的功能。

根据定义，格式化程序和解析器都与我相似。也许我错了，因为我是这个angularjs的新手。

格式化程序定义

每当模型值更改时，作为管道执行的函数数组。依次调用每个函数，将值传递给下一个。用于格式化/转换值以在控件和验证中显示。

解析器定义

每当控件从DOM读取值时，作为管道执行的函数数组。依次调用每个函数，将值传递给下一个。用于清除/转换值以及进行验证。为了进行验证，解析器应使用$
setValidity（）更新有效性状态，并为无效值返回undefined。

请通过一个简单的示例帮助我了解这两个功能。两者的简单说明将不胜感激。

阅读 288

2020-07-04

共1个答案

一尘不染

总结一下：

格式化程序更改模型值在视图中的显示方式。
解析器更改视图值在模型中的保存方式。

这是一个简单的示例，以NgModelController
api文档中的示例为基础：

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

您可以看到它的运行情况：http :
//plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />

在（查看模型）中键入名称时，您将看到模型始终是小写字母。但是，当您单击按钮并以编程方式更改名称（要查看的模型）时，输入字段始终为大写。

2020-07-04