保存/编辑跨度时显示当前日期（angularjs）

Question

我有一个使用angularjs 的相当简单的任务列表，我想保存创建每个任务的时间，并在编辑任务时更新该时间。

我想我可以使用this 之类的东西来显示当前时间，但我不知道如何在保存/编辑时这样做。

HTML：

<div ng-controller="TodoListController">
  <form ng-submit="addTodo()" name="form">
      <input type="text" ng-model="todoText" size="30" placeholder="Add New Entry" required id="textField" ng-model="myVar">
      <input class="btn-primary" type="submit" value="Save">
  </form>
  <ul class="unstyled">
    <li ng-repeat="todo in todos | orderBy : $index:true">
      <button type="button" class="close" aria-label="Close" ng-click="remove(todo)">
        <span aria-hidden="true">&times;</span>
      </button>
      <span class="done-{{todo.done}}" ng-style="todo.customStyle" ng-hide="todo.editing" ng-click="updateVar($event)">{{todo.text}}</span>
      <input type="text" ng-show="todo.editing" ng-model="todo.text">
      <button type="submit" ng-hide="todo.editing" ng-click="change(todo); todo.editing === true">Edit</button>

      <button type="submit" ng-show="todo.editing" ng-click="save($index); todo.editing === false">Save</button>
      <button type="submit" ng-show="todo.editing" ng-click="cancel($index); todo.editing === false">Cancel</button>
    </li>
  </ul>
</div>

JS：

var app = angular.module('todoApp', []);
app.controller('TodoListController', ['$scope', function ($scope) {
  $scope.todos = [];
  $scope.newField = [];
  $scope.customStyle = {};
  $scope.addTodo = function () {
    $scope.todos.push({text: $scope.todoText, done: false, editing: false});
    $scope.todoText = '';
  };
  $scope.remaining = function () {
    var count = 0;
    angular.forEach($scope.todos, function (todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };
  $scope.delete = function () {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function (todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
  $scope.remove = function () {
    $scope.todos.splice(this.$index, 1);
  };
  $scope.change = function (field) {
    var todoIndex = $scope.todos.indexOf(field);
    $scope.newField[todoIndex] = angular.copy(field);
    $scope.todos[todoIndex].editing = true;
  };  
  $scope.save = function (index) {
    $scope.todos[index].editing = false;
  };
  $scope.cancel = function (index) {
    $scope.todos[index] = $scope.newField[index];
  };
  $scope.updateVar = function (event) {
    $scope.myVar = angular.element(event.target).text();
  };
  $scope.editKeyword = function (name, index) {
    $scope.mode[index] = 'edit';
    console.log(name);
  };
}]);

Answer 1

只需在 todo 模型中添加一个todoDate 属性，例如

$scope.todos.push({text: $scope.todoText, done: false, editing: false, todoDate: new Date()});

并在用户更新 todo 对象时更新它，即save()

$scope.save = function (index) {
    $scope.todos[index].editing = false;
    $scope.todos[index].todoDate = new Date();
};

希望对你有帮助。

Answer 2

当您调用 save 函数添加新待办事项时，只需添加 createdOn 字段。

$scope.save = function (index) {
    $scope.todos[index].editing = false;
    $scope.todos[index].createdOn = new Date().getTime();
};

现在当用户编辑待办事项并调用 change 函数时，请执行以下操作

$scope.change = function (field) {
    var todoIndex = $scope.todos.indexOf(field);
    $scope.newField[todoIndex] = angular.copy(field);
    $scope.todos[todoIndex].editing = true;
    $scope.todos[todoIndex].LastModifyOn = new Date().getTime();
  };

现在，如果用户再次编辑了这个更新的待办事项，我们只需调用 change 函数，它就会更新 LastModifyOn 文件。

因此，通过这样做，我们可以保留待办事项创建时间和上次更新时间等数据。

Answer 3

var app = angular.module('todoApp', []);
app.controller('TodoListController', ['$scope', function ($scope) {
  $scope.todos = [];
  $scope.newField = [];
  $scope.customStyle = {};
  $scope.addTodo = function () {
    $scope.todos.push({text: $scope.todoText, done: false, editing: false, created: new Date()});
    $scope.todoText = '';
  };
  $scope.remaining = function () {
    var count = 0;
    angular.forEach($scope.todos, function (todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };
  $scope.delete = function () {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function (todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
  $scope.remove = function () {
    $scope.todos.splice(this.$index, 1);
  };
  $scope.change = function (field) {
    var todoIndex = $scope.todos.indexOf(field);
    $scope.newField[todoIndex] = angular.copy(field);
    $scope.todos[todoIndex].editing = true;
    $scope.todos[todoIndex].created = new Date();
  };  
  $scope.save = function (index) {
    $scope.todos[index].editing = false;
    $scope.todos[index].created = new Date();
  };
  $scope.cancel = function (index) {
    $scope.todos[index] = $scope.newField[index];
  };
  $scope.updateVar = function (event) {
    $scope.myVar = angular.element(event.target).text();
  };
  $scope.editKeyword = function (name, index) {
    $scope.mode[index] = 'edit';
    console.log(name);
  };
}]);