angularjs – ngModel格式器和解析器

发布时间：2020-12-17 09:09:42 所属栏目：安全来源：网络整理

导读：我发布了同样的问题，不同的形式，但没有人回答。我没有得到一个清晰的图片格式化和解析器做的角度。根据定义，Formatters和Parsers都与我相似。也许我错了，因为我是新的这个angularjs。格式化定义当模型值改变时，作为流水线执行的函数数组。每个函数

我发布了同样的问题，不同的形式，但没有人回答。我没有得到一个清晰的图片格式化和解析器做的角度。

根据定义，Formatters和Parsers都与我相似。也许我错了，因为我是新的这个angularjs。

格式化定义

当模型值改变时，作为流水线执行的函数数组。
每个函数被调用，反过来，将值传递到下一个。
用于格式/转换用于在控制和验证中显示的值。

解析器定义

当控件从DOM读取值时，作为流水线执行的函数数组。
每个函数被调用，反过来，将值传递到下一个。
用于清理/转换值以及验证。
为了验证，解析器应该使用$ setValidity()更新有效性状态，并为无效值返回undefined。

请帮助我用一个简单的例子来理解这两个特性。将非常感谢两个简单的例子。

非常感谢你提前。

这个话题在一个相关的问题： How to do two-way filtering in angular.js?

总结：

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

这里是一个简单的例子，建立在一个例子在NgModelController api documentation：

//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

<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" />

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!