angularjs 绑定日期类型数据到date类型的input框

最新推荐文章于 2023-08-23 15:19:35 发布

AAAAAyo

最新推荐文章于 2023-08-23 15:19:35 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs date类型的input框数据交互

本文链接：https://blog.youkuaiyun.com/AAAAAyo/article/details/86527797

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AngularJS从数据库获取日期数据，并将其正确显示在HTML的日期类型输入框中。通过定义一个日期转换函数，确保从后端获取的日期格式能够适配前端输入框的格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从数据库获取数据，显示在date类型的input框中

js代码：

var app = angular.module('myapp', []);
        app.controller("getDatas", ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
            // 获取信息列表
            $http({
                url: '/***/***/***',//这里是接口链接
                method: 'POST',
                data: {
                    //这里可添加要传递的参数
                },
            }).success(function (response) {
                console.log(response);
                if (JSON.parse(response).key == "ok") {
                //具体方法来啦
                    $scope.dateTransform = function (d) {
                        let date = new Date(d);
                        let year = date.getFullYear();
                        let month = date.getMonth() + 1;
                        month = month < 10 ? '0' + month : month;
                        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                        return year + '-' + month + '-' + day;
                    };
                }
            }).error(function () {
                console.log('获取信息列表失败')
                });
        }])

html代码：

<div ng-app="myapp" ng-controller="getDatas">
	<div ng-repeat="item in items">
		<input type="date" ng-model="item.brith_time" ng-value="dateTransform(item.brith_time)">
	</div>
</div>