Question

我需要解析来自JSON数据的字符串的一些日期。如何在Angular中做到这一点？我尝试直接申请git difftool FILENAME（Date.parse），但这不起作用。我也尝试了json过滤器Date.parse({{ item.in_time}})。我想我需要一个自定义过滤器（例如：How to format a JSON date in AngularJS但我不知道在我的应用中将其添加到哪里

＆＃13;

{{ item.out_time | json | date:'shortTime'}}

＆＃13;

var mockData = [{
  "field1": "Annie Parker",
  "field2": "Structural Analysis Engineer",
  "field3": "Mybuzz",
  "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
  "out_time": '1483251003000',
}, {
  "field1": "John Diaz",
  "field2": "Tax Accountant",
  "field3": "Tagchat",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 9:00:03',
}, {
  "field1": "Sean Bailey",
  "field2": "Senior Developer",
  "field3": "Voonder",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 10:00:03',
}, {
  "field1": "Wanda Webb",
  "field2": "Biostatistician I",
  "field3": "Realcube",
  "in_time": '01 Jan 2017 5:00:03',
  "out_time": '01 Jan 2017 5:00:03',
}];


var App = angular.module('myApp', []);

function DataCtrl($scope, $http) {

  $scope.items = mockData;

}

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

＆＃13;

Answer 1

解析对象new Date()中的数据。

new Date(1483251003000)
new Date('01 Jan 2017 8:00:03')

在你的html中，你可以使用{{item.in_time | date: 'dd/MM/yyyy'}}每个例子

在我的项目中，我使用它并且它正在工作。

<强> JS

for (var i = 0; i < temp.length; i++) {
    temp[i].Birthdate = new Date(response.data[i].Birthdate)
}

<强> HTML

{{item.Birthdate  | date: 'dd/MM/yyyy'}}

Answer 2

在范围object.like，Date.parse()

中分配$scope.Parse= Date.parse;

然后你可以在html中调用Parse(item.out_time)

但请检查值1483251003000是否正确！

var mockData = [{
  "field1": "Annie Parker",
  "field2": "Structural Analysis Engineer",
  "field3": "Mybuzz",
  "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
  "out_time": '1483251003000',
}, {
  "field1": "John Diaz",
  "field2": "Tax Accountant",
  "field3": "Tagchat",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 9:00:03',
}, {
  "field1": "Sean Bailey",
  "field2": "Senior Developer",
  "field3": "Voonder",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 10:00:03',
}, {
  "field1": "Wanda Webb",
  "field2": "Biostatistician I",
  "field3": "Realcube",
  "in_time": '01 Jan 2017 5:00:03',
  "out_time": '01 Jan 2017 5:00:03',
}];


var App = angular.module('myApp', []);
   function DataCtrl($scope, $http) {
   $scope.Parse= Date.parse;

  $scope.items = mockData;

}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='DataCtrl'>

    <h1>Data</h1>
    <table class="row-border hover table table-bordered cb-data-table">
      <tr>
        <th>In Time</th>
        <th>Out Time</th>
        <th>Diff</th>
      </tr>

      <tr ng-show="!items.length">
        <td colspan="3" style="text-align: center">~ No Any Records ~</td>
      </tr>

      <tr ng-repeat="item in items">
        <td>{{ Parse(item.in_time) | date:'shortTime'}}</td>
        <td>{{ Parse(item.out_time) | date:'shortTime'}}</td>
        <td></td>
      </tr>
    </table>

Answer 3

angular.module('app', [])
.controller('vm', function($scope){
    $scope.mockData = [{
      "field1": "Annie Parker",
      "field2": "Structural Analysis Engineer",
      "field3": "Mybuzz",
      "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
      "out_time": '1483251003000',
    }, {
      "field1": "John Diaz",
      "field2": "Tax Accountant",
      "field3": "Tagchat",
      "in_time": '01 Jan 2017 8:00:03',
      "out_time": '01 Jan 2017 9:00:03',
    }, {
      "field1": "Sean Bailey",
      "field2": "Senior Developer",
      "field3": "Voonder",
      "in_time": '01 Jan 2017 8:00:03',
      "out_time": '01 Jan 2017 10:00:03',
    }, {
      "field1": "Wanda Webb",
      "field2": "Biostatistician I",
      "field3": "Realcube",
      "in_time": '01 Jan 2017 5:00:03',
      "out_time": '01 Jan 2017 5:00:03',
    }];   
}).filter('fdate', function(){
   return function(input, formatin, formatout){
       formatin = formatin || 'DD MMM YYYY HH:mm:ss';
       formatout = formatout || 'D/M/YY HH:mm';
       return (isNaN(input) ? moment(input, formatin) : moment(new Date(+input))).format(formatout);      
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

<div ng-app='app' ng-controller='vm'>
  <ul>
    <li ng-repeat='item in mockData'>{{item.in_time | fdate}} - {{item.out_time | fdate}}</li>
  </ul>
</div>

从Angular.js中的字符串中解析日期

3 个答案: