title: What is angular way to transform a table cell
body: <p>The problem is as follows. I have a directive which builds some table, and i use <code>ng-repeat</code> to construct table rows dynamicly. Each row has two buttons for editing and deleting accordingly. I look for action with <code>ng-click</code>, but how then transform a cell with static text into a cell with an input field in angular way? I know how to do it with jquery. I look around with <code>ng-switch</code>, but i can't get it works inside <code>ng-repeat</code> on a table cell as expected. My code:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>order.directive('orderLines',function($http,calculateTotalQtyService,$compile){
  
  return {
      restrict: 'A',
      link: function($scope,element, attrs){
  
          $scope.editLine = function(line,order_id){
             // alert ('Edit'+line.id);
            some code here to perform transformation
  
          }
          $scope.deleteLine = function(idx){
              var line_to_delete = $scope.order.lines[idx]
              $http.post('/delete/line?id='+line_to_delete.id +'&amp;order_id='+$scope.order.id).success(function(data){
                    $scope.order.lines.splice(idx,1);
                    $scope.order = data.ord;
                    $scope.order.customer = data.customer;
                    $scope.order.lines = data.lines;
                    var res = calculateTotalQtyService.set(data.lines);
                    $scope.total_kg = res[0];
                    $scope.total_piece = res[1];
              });
  
          }
  
      },
      templateUrl:'/assets/fragments/order/order_lines.html',
      replace: true
  }
  });
  </code></pre>
  
  <p><strong>and HTML</strong></p>
  
  <pre><code>    &lt;div class="span12 fiche" id="lines"&gt;
       &lt;table class="table table-bordered" id="order_lines"&gt;
          &lt;thead class="header_lines"&gt;
          &lt;th&gt;S.N.&lt;/th&gt;
          &lt;th&gt;Ref.&lt;/th&gt;
          &lt;th&gt;Label&lt;/th&gt;
          &lt;th&gt;Tva&lt;/th&gt;
          &lt;th&gt;Qty&lt;/th&gt;
          &lt;th&gt;Unite&lt;/th&gt;
          &lt;th&gt;Prix HT&lt;/th&gt;
          &lt;th&gt;Total HT&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody ng-switch="lines.length"&gt;
          &lt;tr id="no_record" ng-switch-when="0"&gt;&lt;th colspan="9"  style="text-align: center" &gt;No records&lt;/th&gt;&lt;/tr&gt;
          &lt;tr ng-repeat="line in order.lines"&gt;
              &lt;td&gt;{{$index+1}}&lt;/td&gt;
              &lt;td class='line-ref'&gt;{{line.product_ref}}&lt;/td&gt;
              &lt;td&gt;{{line.label}}&lt;/td&gt;
              &lt;td class='line-tva'&gt;{{line.tva}}&lt;/td&gt;
              &lt;td class='line-qty'&gt;{{line.qty}}&lt;/td&gt;
              &lt;td class='line-unity'&gt;{{line.unity}}&lt;/td&gt;
              &lt;td class='line-prix_ht'&gt;{{line.prix_ht}}&lt;/td&gt;
              &lt;td&gt;{{line.prix_ht*line.qty}}&lt;/td&gt;
              &lt;th class='control-buttons'&gt;
                  &lt;button  class='btn editline' ng-click="editLine(line,order.id)"&gt;&lt;i class='icon-edit'&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class='btn deleteline' ng-click="deleteLine($index)"&gt;&lt;i class='icon-trash'&gt;&lt;/i&gt; &lt;/button&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So html is a template, that i use in directive. How perform transformation ? with ng-switch? but how, or there are other solutions ? I want to avoid jquery if it's possible. Any help would be appreciated.</p>