angularjs - What is angular way to transform a table cell -

the problem follows. have directive builds table, , use ng-repeat construct table rows dynamicly. each row has 2 buttons editing , deleting accordingly. action ng-click, how transform cell static text cell input field in angular way? know how jquery. around ng-switch, can't works inside ng-repeat on table cell expected. code:

js

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);           code here perform transformation          }         $scope.deleteline = function(idx){             var line_to_delete = $scope.order.lines[idx]             $http.post('/delete/line?id='+line_to_delete.id +'&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 } }); 

and html

    <div class="span12 fiche" id="lines">      <table class="table table-bordered" id="order_lines">         <thead class="header_lines">         <th>s.n.</th>         <th>ref.</th>         <th>label</th>         <th>tva</th>         <th>qty</th>         <th>unite</th>         <th>prix ht</th>         <th>total ht</th>         <th></th>         </thead>         <tbody ng-switch="lines.length">         <tr id="no_record" ng-switch-when="0"><th colspan="9"  style="text-align: center" >no records</th></tr>         <tr ng-repeat="line in order.lines">             <td>{{$index+1}}</td>             <td class='line-ref'>{{line.product_ref}}</td>             <td>{{line.label}}</td>             <td class='line-tva'>{{line.tva}}</td>             <td class='line-qty'>{{line.qty}}</td>             <td class='line-unity'>{{line.unity}}</td>             <td class='line-prix_ht'>{{line.prix_ht}}</td>             <td>{{line.prix_ht*line.qty}}</td>             <th class='control-buttons'>                 <button  class='btn editline' ng-click="editline(line,order.id)"><i class='icon-edit'></i></button>                 <button class='btn deleteline' ng-click="deleteline($index)"><i class='icon-trash'></i> </button>             </th>         </tr>         </tbody>     </table>   </div> 

so html template, use in directive. how perform transformation ? ng-switch? how, or there other solutions ? want avoid jquery if it's possible. appreciated.

so got custom directive, inspired @laut3rry. interested solution:

directive:

order.directive('editable', function(){

return {     restrict : 'e',     replace : true,     template: '<div><span ng-hide="editmode">{{line.qty}</span><input class="span1" ng-show="editmode" type="text" ng-model="line.qty"/></div>',      link : function(scope, element, attrs){      } } 

});

and in html, in example it's qty cell only, need change, can use cell , little bit of modification, example passing cell value in attribute of directive , can universal:

<td class='line-qty'><editable></editable></td> 

in controller initialize $scope.editmode = false cell isn't editable default , in ng-click="editline()" handler change $scope.editmode = true , cell transforms in input field. directives , directives , once more directives.... :)

for interested, here link plunk plunk