title: angularjs table edit row
body: <ol>
  <li>I'm trying with Angularjs to make, when clicked a row in the table to let it appear an input to change the value of that row. Only now when I click the edit button the whole table shows. </li>
  <li>The save and cancel button don't work anymore, because now also the save button cancels.`</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular
      .module("form",["factories"])
      .controller("LocationFormCtrl", LocationFormCtrl);
      
  function LocationFormCtrl(userFactory, carFactory, petFactory){
    var vm = this;
    vm.user = userFactory.getUser();
    vm.editorEnabled = false;
  
    vm.enableEditor = function(){
      vm.editorEnabled = true;
      vm.editName = vm.user.name;
      vm.editName = vm.users.name;
      vm.editMail = vm.user.mail;
      vm.editMail = vm.users.mail;
  
    };
    
    vm.save = function(){
      vm.user.name = vm.editName;
      vm.users.name = vm.editName;
      vm.user.mail = vm.editMail;
      vm.users.mail = vm.editMail;
      vm.disableEditor();
    };
    
    vm.disableEditor = function(){
      vm.editorEnabled = false;
    };
  
    vm.users = userFactory.getUsers();
  }
  
  var factories = angular.module("factories", []);
  
  factories.factory('userFactory', function(){
    var factory = {
      getUser: getUser,
      getUsers: getUsers
  
    }
  
    return factory;
  
    function getUser(){
      var user = {
        name: "henk2",
        mail: 'aaa@gmail.com'
      }
      return user;
    }
  
  
  
    function getUsers(){
      var users = [
        {
          name: "Bert",
          mail: 'bert@gmail.com'
        },
        {
          name: "Giel",
          mail: 'giel@gmail.com'
        },
        {
          name: "Willem",
          mail: 'willem@gmail.com'
        }
      ];
      return users;
      selected: {}
    } 
  });
  
  factories.factory('carFactory', function(){
      var factory = {
        getCar : getCar
      }
    
    return factory;
  
    function getCar(){
      var car = {
        color: "black",
        maxSpeed: 200,
        name: "Audi r8 spyder"
      }
      return car;
    }
  });
  
  factories.factory("petFactory", function(){
    var factory = {
      getPet : getPet
    }
  
    return factory;
  
    function getPet(){
      var pet = {
        name: "vlekje",
        soort: "cat",
        age: 6
      }
      return pet;
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="factories.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="form" ng-controller="LocationFormCtrl as vm"&gt;
      
  &lt;
  
      &lt;table border="2"&gt;
          &lt;tbody ng-submit="doneEditing"&gt;
              &lt;tr ng-repeat="x in vm.users"&gt;
                &lt;td&gt;
                  &lt;input value="{{ x.name }}" ng-dblclick="editItem(item)" style="border: none;"&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;input value="{{ x.mail }}" ng-dblclick="editItem(item)" style= "border:none;"&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
   &lt;table border="2"&gt;
        &lt;tr ng-repeat="person in vm.users"&gt;
            &lt;td&gt;
              &lt;div ng-hide="vm.editorEnabled"&gt;{{ person.name }}&lt;/div&gt;
              &lt;div ng-show="vm.editorEnabled"&gt;
                &lt;input type="text"  value="{{ person.name }}"  /&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div ng-hide="vm.editorEnabled"&gt;{{ person.mail }}&lt;/div&gt;
              &lt;div ng-show="vm.editorEnabled"&gt;
                &lt;input type="text"  value="{{ person.mail }}" /&gt;
              &lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div ng-hide="vm.editorEnabled"&gt;
                &lt;div ng-click="vm.enableEditor()"&gt;Edit&lt;/div&gt;
              &lt;/div&gt;
              &lt;div ng-show="vm.editorEnabled"&gt;
                &lt;div ng-click="vm.save()" style="border-radius:50%; background-color:black; height:35px;width:35px;"  &gt;
                  &lt;i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div ng-click="vm.disableEditor()" style="border-radius:50%; background-color:black;height:35px; width:35px;"&gt;
                  &lt;i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"&gt;&lt;/i&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>