title: Inline edit form in Angular.Js
body: <p>I am trying to make a small app with items pulled from a json source and i want a form to edit each element. Each element has several attributes, name, id, description. </p>
  
  <p>Here is the example but the edit form does nothing at the moment. I will later use the example to store the data in a database.</p>
  
  <p>I am trying to find out the best solution to have this edit form directly on each element when pushing on edit for example. What is the best way to do it?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  function Controller($scope) {
  
  var items = [
      {
          "id": "1",
          "name": "John",
          "price": "55.33",
          "description": "Lorem ipsums aute irure doln v anim id est laborum.",
          "flag": "0"
      },
      {
          "id": "2",
          "name": "Mike",
          "price": "68",
          "description": "Loriannaj jh said ihsa djni cjipsums aute irure doln v anim id est laborum.",
          "flag": "0"
      },
      {
          "id": "15",
          "name": "George",
          "price": "78",
          "description": "This is the description",
          "flag": "1"
      }
  ];
      //Initialize the controller and the UI
      $scope.items = angular.fromJson(items);
  
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="style.css"&gt;
  
      &lt;!-- Angular Staff --&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
  &lt;/header&gt;
  &lt;section&gt;
  
  &lt;div class="columns2" ng-controller="Controller"&gt;
  
      &lt;div style="width: 500px; display: inline-block"&gt;
          &lt;h3&gt;ITEMS&lt;/h3&gt;
          &lt;div ng-repeat="item in items"&gt;
              &lt;div class="user_div" &gt;
              &lt;a href="#" ng-click="showDetails = ! showDetails"&gt;{{item.name}} &lt;/a&gt;
              &lt;a style="float: right" href="#" ng-click="showEdit = ! showEdit"&gt;Edit &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="user_data" ng-show="showDetails" &gt;{{item.description}}&lt;/div&gt;
              &lt;div class="user_data" ng-show="showEdit" &gt;
                  &lt;h3&gt;Edit Item&lt;/h3&gt;
                  &lt;input  value="{{item.name}}" type="text"  &gt;
                  &lt;input  value="{{item.description}}" type="text" &gt;
                  &lt;button  ng-click="editItem({{item.id}},{{itemName}},{{itemDescription}})"&gt;Edit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br&gt;
  
          &lt;pre&gt;Items: {{items|json}}&lt;/pre&gt;    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>