Question

我使用AngularJS 1.5并有一个对象，比方说：

myObject = {
  ts: 1497971053529, //time in ms
  field: { a: b } //some object
}

我希望用户观察和修改 myObject的字段，但我想将ts显示为日期（日yyyy.mm.dd），并且field应该在json中。这样的事情：

<input type="text" ng-model="myObject.ts"
    wtf-to-converter="longToDate" wtf-from-converter="dateToLong">
<input type="text" ng-model="myObject.field"
    wtf-to-converter="objectToJson" wtf-from-converter="jsonToObject">

结果：

2017.06.20
{"a":"b"}

那么如何实现这些转换器呢？如果我只需要观察这些值，我可以使用AngularJS管道：{{myObject.field | json }}，但我也需要编辑它。

这可能是一个愚蠢的问题，但我是后端开发人员，还没有习惯于前端功能。谢谢你的帮助！

Answer 1

您可以使用以下示例：它是一个使用格式化程序（模型 - ＆gt;用户）和解析器（用户 - ＆gt;模型）将文本转换为日期和日期的指令。

(function (angular) {
    "use strict";

    angular.module("YourModule").directive("msDate", msDate);

    function msDate() {
        return {
            restrict: "A",
            require: "ngModel",
            link: link
        };

        function link(scope, element, attrs, ngModel) {
            // From the user to the model
            ngModel.$parsers.push(function (value) {
                return new Date(value).getTime();
            });
            // From the model to the user
            ngModel.$formatters.push(function (value) {
                return new Date(value);
            });
        }
    }
}(angular));

这不是解决问题的完整解决方案，但你会明白这一点;

用法如下：

<input type="date" ng-model="yourModel" ms-date>

AngularJS - 为视图创建自定义转换器

1 个答案: