AngularJs

ToDoList use angularjs

by TemaMix

HTML

<div ng-app='myApp'>
    <div ng-controller='TasksEditor'>
      <ul class='tasks'>
        <li inline-edit='task'  ng-click='edit()' ng-repeat='task in tasks'>
          <div  ng-show="editMode">
            <input ng-model='task.name' on-enter="save()" on-esc="cancel()">
          </div>
          <div  ng-hide="editMode" class='task-name'>
             {{task.name}}
           </div>
         </li>
      </ul>        
    </div>
</div>

JavaScript

var app = angular.module("myApp", []);

function TasksEditor($scope) {
  $scope.tasks = [
    {
      name: 'первый'
    }, {
      name: 'второй'
    }, {
      name: 'третий'
    }
  ];
 

};

app.directive('inlineEdit', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, elm, attr) {
      var previousValue;
      previousValue = '';
    
      elm.find('input').bind('blur', function() {
        return scope.$apply(function() {
          return scope.editMode = false;
        });
      });
      scope.edit = function() {
        scope.editMode = true;
        previousValue = scope.task.name;
        return $timeout(function() {
          return elm.find('input')[0].focus();
        }, 0, false);
      };
      scope.save = function() {
        scope.editMode = false;
       
      };
      return scope.cancel = function() {
        scope.editMode = false;
        return scope.task.name = previousValue;
      };
    }
  };
});