angularjs ngModel格式和解析器

eagi6jfj  于 2023-04-19  发布在  Angular
关注(0)|答案(2)|浏览(241)

我以不同的形式发布了同样的问题,但没有人回答。我没有清楚地了解Angular JS中的格式化器和解析器是做什么的。
根据定义,格式和解析器看起来都和我很相似。也许我错了,因为我是angularjs的新手。

格式定义

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

解析器定义

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

请用一个简单的例子帮助我理解这两个功能。

t2a7ltrp

t2a7ltrp1#

这个主题在一个相关的问题中得到了很好的回答:How to do two-way filtering in AngularJS?
总结如下:

  • 格式更改模型值在视图中的显示方式。
  • 分析器更改视图值在模型中的保存方式。

下面是一个简单的例子,建立在[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 to model)中输入一个名称时,你会看到模型总是小写的。但是,当你点击一个按钮并通过编程改变名称(model to view)时,输入字段总是大写的。[1]:http://docs.angularjs.org/api/ng/type/ngModel.NgModelController

bis0qfac

bis0qfac2#

格式化器和解析器的另一个用途是当你想以UTC时间存储日期并在输入中以本地时间显示它们时,我为此创建了下面的datepicker指令和utcToLocal过滤器。

(function () {
    'use strict';

    angular
        .module('app')
        .directive('datepicker', Directive);

    function Directive($filter) {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                element.addClass('datepicker');
                element.pickadate({ format: 'dd/mm/yyyy', editable: true });

                // convert utc date to local for display
                ngModel.$formatters.push(function (utcDate) {
                    if (!utcDate)
                        return;

                    return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy');
                });

                // convert local date to utc for storage
                ngModel.$parsers.push(function (localDate) {
                    if (!localDate)
                        return;

                    return moment(localDate, 'DD/MM/YYYY').utc().toISOString();
                });
            }
        };
    }
})();

它使用这个utcToLocal过滤器来确保输入日期在转换为本地时间之前格式正确。

(function () {
    'use strict';

    angular
        .module('app')
        .filter('utcToLocal', Filter);

    function Filter($filter) {
        return function (utcDateString, format) {
            if (!utcDateString) {
                return;
            }

            // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified
            if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
                utcDateString += 'Z';
            }

            return $filter('date')(utcDateString, format);
        };
    }
})();

moment.js用于将本地日期转换为UTC日期。
pickadate.js是使用的datepicker插件

相关问题