foundation-grid-table-helper.js

angular.module('app', [])
.controller('AppCtrl', function(){
	var app = this;
	app.names = [
    {
      "id": "e1",
      "firstName": "Alyson",
      "lastName": "Valdez"
    },
    {
      "id": "b5",
      "firstName": "Michele",
      "lastName": "Pruitt"
    },
    {
      "id": "18",
      "firstName": "Laura",
      "lastName": "Walls"
    },
    {
      "id": "76",
      "firstName": "Sawyer",
      "lastName": "Gill"
    }
  ];
	
})
	.directive('tableGrid', function() {
		return {
			scope: true, //new scope needed in case of multiple instances
			controller: controller,
			controllerAs: 'tableGrid'
		}

		function controller($scope) {
			var tableGrid = this;

			tableGrid.registry = [];

			tableGrid.add = function(colDef) {
				var colIndex, breakpoints;
				var bits = colDef.split(':');

				colIndex = bits[0];
				breakpoints = bits[1].split(',');

				tableGrid.registry[colIndex] = breakpoints;

				return colIndex;
			}

			tableGrid.getClass = function(index) {

				var breakpoints = tableGrid.registry[index];
				var classStr = 'columns ';
				var prefixs = ['small-', 'medium-', 'large-'];

				for (var i = 0; i < breakpoints.length; i++) {
					classStr = classStr + (prefixs[i] + breakpoints[i].trim()) + ' ';
				}

				console.log(index, breakpoints, classStr);
				return classStr;
			}

		}
	})
	.directive('tgHeadCol', function() {
		return {
			require: '^tableGrid',
			link: link
		};

		function link($scope, $element, $attrs, tableGrid) {
			var index = tableGrid.add($attrs.tgHeadCol);
			$attrs.$addClass(tableGrid.getClass(index));
		}
	})

.directive('tgCol', function() {
	return {
		require: '^tableGrid',
		link: link
	};

	function link($scope, $element, $attrs, tableGrid) {
		var index = $attrs.tgCol;
		$attrs.$addClass(tableGrid.getClass(index));
	}
})