Angular JS Row Append

by Ganesh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
 <body ng-app="app" ng-controller="ctrl">
    
    <table class="table" style="width:300px">
        <thead>
            <tr>
               <th>Name</th>
               <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows" smart-row="row">
                <td>{{row.name}}</td>
                <td>{{row.description}}</td>
            </tr>
        </tbody>
    </table>
  </body>

JavaScript

var app = angular.module('app', []);
      app.controller('ctrl', function($scope) {
          $scope.rows = [
            { name: 'Toaster', description: 'Great for making toast'},
            { name: 'Microwave', description: 'Heat your favorite foods' },
            { name: 'TV', description: '52" flat screen', price:399.99 }];
      });
      
      app.directive('priceRow', function() {
        return {
          restrict: 'A', 
          scope: {priceRow:'@'},
          template: '<td colspan="2" align="right">Price: {{ priceRow | currency}}</td>'
        }
      });
    
      app.directive('smartRow', function($compile) {
        return  {
          restrict: 'A',
          transclude: 'element',
          link: function(scope, element, attr, ctrls, transcludeFn) {
            var model = scope.$eval(attr.smartRow);
            transcludeFn(function(clone) {
              element.after(clone);
              if (model.hasOwnProperty('price')) {
           
                 var priceRow = angular.element('<tr price-row="' + model.price + '"></tr>');
                 clone.after(priceRow);
                 $compile(priceRow)(scope);
              }
            })
          }
        }
      });