格式化json结果中的日期并显示在angularjs表中

format date from json result and display in table angularjs

本文关键字：显示 angularjs 表中 日期 json 结果 格式化      更新时间：2023-09-26

我向一个页面发出get请求，该页面返回一个日期格式为"dd/MM/yyyy"的json。我解析它并将其显示在一个表中，例如下面

<script>
angular.module("myApp",[])
.controller("mainController", function($scope, $http) {
    $http.get('backList.php',{params: {dta: $scope.dataSelected}})
            .success(function(data) { if("null" == data) 
                                        $scope.list=""; 
                                    else {
                                        $scope.list=data;
                                    }
                                    } )
            .error(function() { alert("Error retrieve data!"); });
    }
});
</script>
<body ng-controller="mainController">
<div>
<table>
  <tbody>
    <tr ng-repeat="row in list">
      <td align="center">{{row.dta_example}}</td>
      <td align="center"><input class="calendar" type="text" ng-model="row.dta_example" ng-value="row.dta_example" /></td>
    </tr>
  </tbody>
</table>
</div>
</body>

一切都很好，但我想使用type="data"来弹出日历，但如果我使用它，我会得到一个错误，告诉我row.dta_example需要是Date（）对象。

所以我在get call的成功方法中做了这样的事情：

.success(function(data) { if("null" == data) 
                                        $scope.list=""; 
                                    else {
                                        $scope.list=data;
                                        var i = 0;
                                        for(var key in $scope.list){
                                            $scope.list[i].dta_example=new Date.exactmatch(key.dta_example)
                                        }
                                    }
                                    } )

但是失败了。

尝试：

$scope.list[i].dta_example = new Date(key.dta_example);

此外，"null"不等于null。除非您的代码以某种方式返回一个字符串"null"，否则该测试将不起作用。

在过滤器中使用momentjs.com。

<script>
  angular.module("myApp",[])
  .controller("mainController", function($scope, $http) {
     $http.get('backList.php',{params: {dta: $scope.dataSelected}})
        .success(function(data) { if("null" == data) 
                                    $scope.list=""; 
                                else {
                                    $scope.list=data;
                                }
                                })
        .error(function() { alert("Error retrieve data!"); });
      }
   });
  angular.module("myApp").filter('momentFilter', function () {
     return function (date) {
       if (date === null || !angular.isDefined(date))
         return null;
       if (moment(date).isValid()) {
         return moment(date).format('DD. MM. YYYY HH:mm');
       }
       return date;
    }
  });
</script>
<body ng-controller="mainController">
<div>
 <table>
   <tbody>
     <tr ng-repeat="row in list">
       <td align="center">{{row.dta_example | momentFilter }}</td>
       <td align="center"><input class="calendar" type="text" ng-model="row.dta_example" ng-value="row.dta_example" /></td>
     </tr>
   </tbody>
 </table>
</div>
</body>
相关文章：