我正在为我的作业创建一个日记应用程序，并且正在使用 AngularJS。 我的问题是如何提交当前日期以及他们写的条目。
所以我想要完成的是，在与 {{todo.title}} 相同的页面上，还将显示添加 newTodo 的日期。 有人可以帮忙吗？我一无所知:(
<!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})
....
};
然后，如果您想在 View 中显示它，请使用 built in date filter in angular
<span> {{todo.date | date:'medium'}}</span>
关于javascript - 使用 AngularJS 将当前日期添加到帖子中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27894734/