title: Angularjs - view and edit an object
body: <p>i would like to have a list with entries of objects. If i click on an entry in that list i want to see the details of the object and an edit button on an area at the right side of the list. If i click that button the details disappers and a form to edit the object should appear.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
      &lt;tr 
          ng-repeat="object in objects" 
          ng-click="select(object.id)"
      &gt;
          &lt;td&gt;{{object.name}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;button ng-click="edit(selectedObject.id)"&gt;Edit&lt;/button&gt;
  
  &lt;div class="view"&gt;
      Name: {{selectedObject.name}}
  &lt;/div&gt;
  
  &lt;form&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input ng-model="object.name"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>myModule.controller('MyController', function($scope, MyService) {
      $scope.objects = MyService.getObjects();
  
      $scope.select = function(id) {
          $scope.selectedObject = angular.copy(MyService.getObject(id));  
      };
  
      $scope.edit = function(id) {
          ...
      };
  });
  </code></pre>
  
  <p>In the edit function i could use the selectedObject, but maybe in future i also want to edit the object directly without selecting it before. So first i could do the same like in the select function but then i would call the service twice to receive the same object...</p>
  
  <p>Also i don't know really how to handle the toggle between view- and editmode.</p>
  
  <p>Thanks in advance!</p>