JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="http://docs.angularjs.org/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <i-table>
  blah1 | blah2 | abc | def
  blah3 | blah4 | jbc | djf
  </i-table>
  <br>
  <copyright label="'Marco Alves'" start="2012"></copyright>
</body>
</html>

JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


app.directive('copyright', function(){
  return {
    restrict: 'E',
    scope: {
      label: "=",
      start: "="
    },
    link: function(scope, element){
      var currentDate = new Date();
      var currentYear = currentDate.getFullYear();
      
      var text = "© " + scope.start + " — " + currentYear + " " +  scope.label; 
      if (scope.start == currentYear) {
        text = "© " + scope.start + " " + scope.label;
      }
      angular.element(element).text(text);
    }
  };
});

app.directive('iTable', function(){
  return {
    restrict: 'E',
    compile: function(elm, attrs, transclude){
      var content = angular.element(elm).text();
      var rows = content.split("\n");
     
      var rendered = '<table class="table table-bordered">';
      
      for (i in rows) {
        
        var re = /\w+/;
        
        var rowHasData = re.test(rows[i]);
        
        console.log(rowHasData);
        
        if ( rowHasData ) {
            
          var rowHtml = "<tr>";
          var cells = rows[i].split('|');
          
          for (j in cells) {
            rowHtml += "<td>";
            rowHtml += cells[j];
            rowHtml += "</td>";
          };
        
          rowHtml += "</tr>";
        
        rendered += rowHtml;
        }
      
        
        
      } 
      rendered += "</table>";
      
      angular.element(elm).text("");
      angular.element(elm).append(rendered);
    }
  };
});