title: Angular.js inline-editing
body: <p>I'm trying to find the best approach of inline-editing with angularjs. In my case it's kind of a data-grid with an "edit" button. So it's inside ng-repeat.</p>
  
  <p>What I've seen people do is have both actual data and editing inputs in the same row, with editing inputs being hidden and shown on click of the edit button.</p>
  
  <p>But it doesn't seem right. It's a lot of useless DOM in my opinion.</p>
  
  <p>So I thought I would be better to do something like this. You click on the edit button, which is gonna have a directive, which would 1) hide the <code>&lt;td&gt;</code> with data 2) find buttons' parent, which should be the <code>&lt;tr&gt;</code>, and inject a template with  into it 3) on save remove those editing <code>&lt;td&gt;</code>s and show the data <code>&lt;td&gt;</code>s again. </p>
  
  <p>So I started with making the directive, inside I had <code>element.click()</code> function, which</p>
  
  <pre><code>// found the parent
  var parent = element.closest('tr');
  // found all the data tds
  var tds = parent.find('td');
  // hidden them  
  tds.hide();
  </code></pre>
  
  <p>Now here's the problem, next I thought about doing something like this</p>
  
  <pre><code>// append input with editing tds into parent
  parent.append('&lt;td&gt;&lt;input type="text" ng-model="entry.name" /&gt; {{entry.name}} &lt;/td&gt;');
  </code></pre>
  
  <p>But then it wouldn't bind or even parse the {{}} would it? What method would I have to use instead of jquery's append? </p>
  
  <p>Docu on directives says this</p>
  
  <blockquote>
    <p>template element - The element where the directive has been declared.
    It is safe to do template transformation on the element and child
    elements only.</p>
  </blockquote>
  
  <p>So I can't use template transoformation on the element.parent()</p>
  
  <p>Would it help if I made the directive on the <code>&lt;tr&gt;</code> and even if I did, I would then transform my whole <code>&lt;tr&gt;</code>, which means I'd lost the original template and I'd have to have another directive or something that would transform it back to the original state.. wouldn't I?</p>
  
  <h3>Edit</h3>
  
  <p>Since this questions seems pretty popular.. firstly my original worry of rendering additional element with each ng-repeat iteration is unfounded because 1) you can use ng-if, which means it's not gonna be rendered at all until the condition is true 2) you could append a template just as I intended, then just use <code>$compile</code> and it's gonna work just fine, it's definitely not gonna be "expensive", since you are doing it just for the one element. There are many many ways to approach this, but ng-if is the simpliest, if supermasher's way doesn't suit you, that is.</p>