gpt4 book ai didi

angularjs - ngModel 格式化器和解析器

转载 作者:行者123 更新时间:2023-12-03 04:49:05 26 4
gpt4 key购买 nike

我以不同的形式发布了相同的问题,但没有人回答。我不清楚格式化程序和解析器在 Angular js 中的作用。

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

格式化程序定义

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

解析器定义

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

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

最佳答案

这个主题在相关问题中得到了很好的阐述:How to do two-way filtering in AngularJS?

总结一下:

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

这是一个简单的示例,基于 [NgModelController api 文档][1] 中的示例:

  //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();
});

您可以看到它的实际效果:https://plnkr.co/plunk/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" />

当您在( View 到模型)中键入名称时,您将看到模型始终为小写。但是,当您单击按钮并以编程方式更改名称(要查看的模型)时,输入字段始终为大写。[1]:http://docs.angularjs.org/api/ng/type/ngModel.NgModelController

关于angularjs - ngModel 格式化器和解析器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22841225/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com