Question

我遇到了从json获取日期并将其与<input>标记集成的问题。我有一个json对象，其中包含＆＃39; date＆＃39;像这样的价值 - dd/mm/yyyy它并没有在html中显示我的日期，当我按下编辑＆＃39;按钮它没有收到这个日期。

JSON

＆＃13;

{
  "books":[
    {
      "title": "Harry Potter and the Philosopher's Stone",
      "author": "J. K. Rowling",
      "date": "26/06/1997"
    }
  ]
}

＆＃13;

<tr ng-repeat="book in recivedBooks">
   <td>
     <span class="date" ng-hide="editMode">Realease Date: {{book.date}}</span>
     <input class="form-control input-lg" name="date" type="date" placeholder="dd/mm/yyyy" ng-show="editMode" ng-model="book.date" required>
   </td>
</tr>

＆＃13;

有没有办法从json解析日期，在html中显示它，然后当你按下＆＃39;编辑＆＃39;按钮它会自动转到<input>？

Answer 1

json的字符串日期必须转换为javascritp日期格式。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="datCtrl">
  <button ng-click=edit()>Edit</button>
<table>
  <tr ng-repeat="book in recivedBooks">
   <td>
     <span class="date" ng-hide="editMode">{{book.Name}}  Realease Date: {{book.date | date:'dd/MM/yyyy'}}</span>
     
     <input class="form-control input-lg" name="date" type="date" placeholder="dd/mm/yyyy" ng-show="editMode" ng-model="book.date" required>
   </td>
</tr>
  
  </table>


</div>

<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
  $scope.editMode=false;
  var json = [
  {Name: 'book 1',date:'02/11/2016'},
  {Name: 'book 2',date:'05/11/2016'}
  ]; // if json file like this
  
  $scope.recivedBooks=[];
  
  var totalBook = json.length;
  
  for(var i=0; i < totalBook; i++){
    var newDateFormate = json[i].date.split("/");
    var date = new Date(newDateFormate[2],newDateFormate[1],newDateFormate[0]);
  $scope.recivedBooks.push({Name:json[i].Name,date:date})
  }
  
  
  $scope.edit= function(){
   $scope.editMode = !$scope.editMode;
  }
});
</script>

<p>The date filter formats a date object to a readable format.</p>

</body>
</html>

AngularJS日期输入日期来自json

JSON

1 个答案: