Angular引导将一个日期字段加载到html中

Angular bootstrap loading a date field into the html

本文关键字：字段 日期 加载 html 一个 Angular      更新时间：2023-09-26

我有一个angular应用程序，我从一个服务中获取数据。

我的控制器app.js如下:

var app = angular.module('myapp', ['ui.bootstrap', 'jsonService']);
    app.controller('mycontroller', function(MyService, $scope, $modal, $log, $http) {
        $scope.profileid=3619;
        MyService.getItems($scope.profileid,function(data){
            $scope.profiledata = data;
        });
    });

我在数据中得到的json对象如下所示:

[
    {
        "profile_id": 3619, 
        "student_id": "554940", 
        "first_name": "Samuel", 
        "last_name": "Haynes",
        "date_of_birth": "2002-03-08T06:00:00Z"
    }
]

这里的date_of_birth是一个DateTime字段。当我试图在html中显示这些值时，如下所示:

<label for="lastName">Student Last Name</label>
<input type="text" class="form-control" id="lastName" ng-model="profiledata[0].last_name" placeholder="Last Name" />
<label for="dob">Date of Birth</label>
<input type="date" class="form-control" id="dob" ng-model="profiledata[0].date_of_birth" />

在这里，姓氏在文本框中显示得很好。但是这个日期行不通。如何显示日期的值?

为了让日期输入摄取该值，首先必须将其转换为javascript date对象。因此，在这种情况下，您将在$scope.profiledata = data;行之后立即添加$scope.profiledata[0].date_of_birth = new Date($scope.profiledata[0].date_of_birth);行。

相关文章：