angular dyanmic table using directive

angular dyanmic table using directive

by sanat gupta

HTML

<div ng-app="testApp">
  <testcomponent num="18"></testcomponent>
</div>

JavaScript

var module = angular.module('testApp', [])
  .directive('testcomponent', function() {
    return {
      restrict: 'E',
      template: '<div><table><thead><th>Table Calculation</th><th>Table Result</th></thead><tbody><tr ng-repeat="x in tableData"><td>{{x.calculation}}</td><td>{{x.result}}</td></tr></tbody></table></div>',
      scope: {
        num: '=num'
      },
      controller: function($scope, $element) {
        $scope.tableData = [];
        for (i = 1; i <= 10; i++) {
          $scope.tableData.push({
            'calculation': i + ' * ' + $scope.num,
            'result': i * parseInt($scope.num)
          });
        }
      }
    };
  });