json之将 AJAX 日期转换为 Javascript 日期以用于 ng-model

mayingbao 阅读：12 2024-09-07 23:24:14 评论：0

我在服务中使用 $http.get 来获取 JSON 数据。返回的 JSON 中我的对象属性之一是 AngularJS 未解析的日期。我需要将此属性绑定(bind)到日期字段，我目前正在通过在获取 AJAX 数据后手动将 JSON 字符串转换为 javascript 日期来解决它，如下所示

app.service('MainService', function(){ 
  var self = this; 
  self.jsonDate = null; 
  self.parsedDate = null; 
 
  // this function will get JSON data from an API in production 
  self.getData = function(){ 
    var jsonData = "2014-06-13T16:00:00"; 
 
    // Angular does not convert my JSON data properties into dates 
    self.jsonDate = jsonData; 
 
    // I can work around this by forcing my dates to be parsed 
    self.parsedDate = moment(jsonData).toDate(); 
  } 
});

有更清洁的方法吗？我构建了一个将字符串转换为日期的过滤器

app.filter('stringToDate', function () { 
    return function (input) { 
        if (!input) 
            return null; 
 
        var date = moment(input); 
        return date.isValid() ? date.toDate() : null; 
    }; 
});

如果我使用它，过滤器效果很好，如下所示

<span ng-bind="service.jsonDate | stringToDate | date:'MM/dd/yy'"></span>

但是如果我尝试将它与 ng-model 一起使用它就不起作用，如下所示

<input type="date" ng-model="service.jsonDate | stringToDate"/>

过滤器可以与 ng-model 一起使用，还是我需要坚持手动将属性转换为日期？我在这里有一个 plunker 来演示我当前的代码

http://plnkr.co/edit/pVaDbjIjtnKaYqrjAd0D?p=preview

请您参考如下方法:

Plunker Demo Here

有几种方法可以做到这一点:

使用 ng-init 中的过滤器来初始化作用域变量，然后将 ng-model 绑定(bind)到作用域变量。

<body ng-controller="MainCtrl" ng-init="mydate = (service.jsonDate | stringToDate)"> 
    <label>Raw JSON Date</label> 
    <input type="date" data-ng-model="service.jsonDate"/><br/><br/> 
 
    <label>Parsed JSON date</label> 
    <input type="date" data-ng-model="mydate"/> 
 </body>

使用 $filter服务来手动调用 stringToDate在您的 Controller 中过滤:

app.controller('MainCtrl', function($scope, $filter, MainService) { 
    $scope.service = MainService; 
 
    // fetch data from service 
    $scope.service.getData(); 
 
    $scope.parsedDate = $filter('stringToDate')(MainService.jsonDate); 
 
});

然后将变量绑定(bind)到您的 ng-model :

<input type="date" data-ng-model="parsedDate"/>

[编辑]

使用 custom directive它依赖于原始 JSON 的 ng-model。添加格式化程序将模型转换为日期字符串；以及将日期字符串转换回模型的解析器。这种方法的优点是保持了双向模型绑定(bind)。当您使用有效的日期字符串更新文本框时，它会自动更新原始 JSON 模型(反之亦然)。

在 plunker 示例中，尝试输入有效的日期字符串，并注意模型如何自动更改。

指令:

   app.directive('jsonDate', function($filter) { 
      return  { 
          restrict: 'A', 
          require: 'ngModel', 
          link: function (scope, element, attrs, ngModel) { 
 
             //format text going to user (model to view) 
             ngModel.$formatters.push(function(value) { 
                var date = $filter('stringToDate')(value); 
                return date.toString(); 
             }); 
 
             //format text from the user (view to model) 
             ngModel.$parsers.push(function(value) { 
                var date = new Date(value); 
                if (!isNaN( date.getTime())) {  
                   return moment(date).format(); 
                } 
             }); 
         } 
     }

HTML:

 <input type="date" data-ng-model="service.jsonDate" json-date/>

最后一个示例允许您将 ngModel 绑定(bind)到 json 日期字符串并让它显示格式化的日期。当用户输入有效的格式化日期时，它会自动更新其绑定(bind)到的 json 日期字符串模型

标签:ajax

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。