AngularJS日期输入，日期来自json
[英]AngularJS date input with date from json
问题描述
I have an issue with getting date from json and integrate it with <input> tag. 
我从json获取日期并将其与<input>标记集成在一起时遇到问题。 I have a json object that has the 'date' value like this - dd/mm/yyyy and it doesn't show me that date in the html, and when I press on the 'Edit' button it doesn't receive this date. 我有一个像这样的“日期”值的json对象dd/mm/yyyy ，它没有在html中显示该日期，并且当我按“编辑”按钮时，它没有收到该日期。
JSON JSON格式
{ "books":[ { "title": "Harry Potter and the Philosopher's Stone", "author": "JK Rowling", "date": "26/06/1997" } ] }
<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>
Is there a way to parse the date from the json, show it in the html and then when you press on the 'Edit' button it will automatically will go to the <input> ? 有没有一种方法可以从json解析日期，将其显示在html中，然后当您按“编辑”按钮时，它将自动进入<input> ？
1 个解决方案
解决方案1
1 已采纳 2016-08-15 18:13:21
string date from json have to convert into javascritp Date format. 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.