Angular: Empty Fiddle

http://angularjs.org/

by sunil puvvada

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-controller="LocationFormCtrl as vm">
  <table border="2">
    <tbody ng-submit="doneEditing">
      <tr ng-repeat="x in vm.users">
        <td>
          <input value="{{ x.name }}" ng-dblclick="editItem(item)" style="border: none;">
        </td>
        <td>
          <input value="{{ x.mail }}" ng-dblclick="editItem(item)" style="border:none;">
        </td>
      </tr>
    </tbody>
  </table>

  <table border="2">
    <tr ng-repeat="person in vm.users">
      <td>
        <div ng-hide="vm.editorEnabled[$index]">{{ person.name }}</div>
        <div ng-show="vm.editorEnabled[$index]">
          <input type="text" value="{{ person.name }}" ng-model="person.name" />
        </div>
      </td>
      <td>
        <div ng-hide="vm.editorEnabled[$index]">{{ person.mail }}</div>
        <div ng-show="vm.editorEnabled[$index]">
          <input type="text" value="{{ person.mail }}" ng-model="person.mail" />
        </div>
      </td>
      <td>
        <div ng-hide="vm.editorEnabled[$index]">
          <div ng-click="vm.enableEditor($index)">Edit</div>
        </div>
        <div ng-show="vm.editorEnabled[$index]">
          <div ng-click="vm.save($index,person.name,person.mail)" style="background-color:black; height:25px; width:45px;color: #fff;">
            save
          </div>
          <div ng-click="vm.disableEditor($index)" style="background-color:black;height:25px; width:45px;color: #fff;">
            cancel
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

CSS

.button{
  color: #fff;
}

JavaScript

var myApp = angular.module('myApp', ['factories'])
  .controller("LocationFormCtrl", LocationFormCtrl);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function LocationFormCtrl($scope, userFactory, carFactory, petFactory) {
  var vm = this;
  vm.user = userFactory.getUser();
  vm.editorEnabled = [];

  vm.enableEditor = function(index) {
    vm.editorEnabled[index] = true;
    vm.editName = vm.user.name;
    vm.editName = vm.users.name;
    vm.editMail = vm.user.mail;
    vm.editMail = vm.users.mail;

  };

  vm.save = function(index,editNameValue,editEmailValue) {
    vm.users[index].name = editNameValue;
    vm.users[index].mail = editEmailValue;
    vm.disableEditor(index);
  };

  vm.disableEditor = function(index) {
    vm.editorEnabled[index] = 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: '[email protected]'
    }
    return user;
  }



  function getUsers() {
    var users = [{
      name: "Bert",
      mail: '[email protected]'
    }, {
      name: "Giel",
      mail: '[email protected]'
    }, {
      name: "Willem",
      mail: '[email protected]'
    }];
    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;
  }
});