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

Question

I have a fairly simple task list using angularjs and I would like to save the time when each task was created and update that time if the task is edited.

I'm thinking I could use something like this to display the current time, but I'm not sure how to do it on save/edit.

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

Just add a todoDate attribute in the todo model like

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

and update it when the user updates the todo object ie save()

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

Hope it helps.

Answer 2

When you call save function to add new todos simply add the createdOn field.

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

Now when user edits the todo and change function is called, do as below

$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();
  };

Now if this updated todo is again edited by the user we need to simply call change function and it will update the LastModifyOn filed.

So by doing this, we can keep both data like when was the todo created and when was it last gets updated.

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);
  };
}]);