使用AngularJS将当前日期添加到帖子中

Add current date to a post with AngularJS

本文关键字：添加 AngularJS 当前日期 使用      更新时间：2023-09-26

我正在为我的作业创建一个日记应用程序，并且正在使用AngularJS。我的问题是我如何提交当前日期以及他们写的条目。

因此，我想要完成的是，在与{{todo.title}}相同的页面上，还将显示添加新待办事项的日期。谁能帮忙？我一无所知:(

<!doctype html>
<html ng-app="To_Do">
<head>
<meta charset="UTF-8">
<title>Dear Diary</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href="stijl.css" rel="stylesheet" type="text/css">
<!--<link href="bootstrap.css" rel="stylesheet" type="text/css">-->
    <link rel="shortcut icon" href="image/favicon_me.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="image/apple-icon-precomposed.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="image/apple-icon-72x72-precomposed.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="image/apple-icon-114x114-precomposed.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="image/apple-icon-144x144-precomposed.png" />
    <link rel="apple-touch-startup-image" href="image/apple-startup-320x460.png" media="(device-width: 320px)" />
    <link rel="apple-touch-startup-image" href="image/apple-startup-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" />
</head>
<body>
<header> 
    <h1> Dear Diary ... </h1>   
</header>
<div id="container">
<div ng-controller="todoCtrl" ng-show="tab === 1">
        <ul class="dots">
        <li ng-repeat="todo in todos | orderBy:'date':true">
        <input type="checkbox" ng-model="todo.done" />
            <span ng-class="{'done':todo.done}">{{todo.title}} </span>
        </li>
    </ul>
    <button ng-click="clearCompleted()">Clear entry</button>
</div>  
<div ng-controller="todoCtrl" ng-show="tab === 2">
<p> Write to me: </p>
    <form name="frm" ng-submit="addTodo()">
        <input type="text" placeholder="Today was..." class="sizeText" name="newTodo" ng-model-    instant ng-model="newTodo" required />
        <br><br>
        <button class="btn" ng-disabled="frm.$invalid"><i class="icon-plus"></i>GO</button>
    </form>
    <br>
  </div>
 </div>
 <footer>
    <section ng-init="tab = 1">
        <ul class="nav">
            <li> <a href ng-click="tab = 1"> Overzicht </a> </li>
            <li> <a href ng-click="tab = 2"> Toevoegen </a> </li>
        </ul>
    </section> 
</footer>
<script src="javascript/angular.min.js"></script>
 <script> 
    angular.module('To_Do',['storageService']).
    controller('todoCtrl',['$scope','getLocalStorage', function($scope, getLocalStorage){
        $scope.todos = getLocalStorage.getTodos();
        $scope.today = new Date(); 
        [
<!--                {'title' : 'Build a todo app', date: $scope.today, 'done':false} -->            
        ];
        $scope.addTodo = function() {
            $scope.todos.push({'title':$scope.newTodo , date: $scope.today, 'done':false})
            getLocalStorage.updateTodos($scope.todos);
            $scope.newTodo = '' 
        };
        $scope.clearCompleted = function() {
            $scope.todos = $scope.todos.filter(function(item){
                return !item.done
            });
            getLocalStorage.updateTodos($scope.todos);
        };
    }]);
    var storageService = angular.module('storageService', []);
    storageService.factory('getLocalStorage', function() {
        var todoList = {};
        return {
                list: todoList,
            updateTodos: function (todosArr) {
                if (window.localStorage && todosArr) {
                    localStorage.setItem("todos", angular.toJson(todosArr));
                }
                //update the cached version
                todoList = todosArr;
            },
            getTodos: function () {
                todoList = angular.fromJson( localStorage.getItem("todos") );
                return todoList ? todoList : [];
            }
        };
    });

</script>
</body>
</html>

每当添加新的待办事项时，请保存当前时间：

    $scope.addTodo = function() {
        $scope.todos.push({'title':$scope.newTodo , date: new Date(), 'done':false})
       ....
    };

然后，如果您想在视图中显示它，请使用 angular 中的内置日期过滤器

<span> {{todo.date | date:'medium'}}</span>
相关文章：