fix(directive): Work with static tables

Iterate over all <tr> in order to setup data-title attribute.

Fixes #3

Author: awerlang

release/angular-responsive-tables.js

@@ -6,18 +6,19 @@
             restrict: "A",
             compile: function(element, attrs) {
                 attrs.$addClass("responsive");
-                var headers = element[0].querySelectorAll("thead th");
-                var rows = element[0].querySelectorAll("tbody tr");
-                if (headers.length && rows.length) {
-                    rows = rows[0];
-                    var headerIndex = 0;
-                    Array.prototype.forEach.call(rows.querySelectorAll("td"), function(value, index) {
-                        var title = headers.item(headerIndex).textContent;
-                        if (title && !value.getAttributeNode("data-title")) {
-                            value.setAttribute("data-title", title);
-                        }
-                        var colspan = value.getAttributeNode("colspan");
-                        headerIndex += colspan ? parseInt(colspan.value) : 1;
+                var headers = element[0].querySelectorAll("tr > th");
+                if (headers.length) {
+                    var rows = element[0].querySelectorAll("tbody > tr");
+                    Array.prototype.forEach.call(rows, function(row) {
+                        var headerIndex = 0;
+                        Array.prototype.forEach.call(row.querySelectorAll("td"), function(value, index) {
+                            var title = headers.item(headerIndex).textContent;
+                            if (title && !value.getAttributeNode("data-title")) {
+                                value.setAttribute("data-title", title);
+                            }
+                            var colspan = value.getAttributeNode("colspan");
+                            headerIndex += colspan ? parseInt(colspan.value) : 1;
+                        });
                     });
                 }
             }

release/angular-responsive-tables.min.js

@@ -5,19 +5,20 @@ function wtResponsiveTable() {
         restrict: 'A',
         compile: function (element, attrs) {
             attrs.$addClass('responsive');
-            var headers = element[0].querySelectorAll('thead th');
-            var rows = element[0].querySelectorAll('tbody tr');
-            if (headers.length && rows.length) {
-                rows = rows[0];
-                var headerIndex = 0; 
-                Array.prototype.forEach.call(rows.querySelectorAll('td'), function (value, index) {
-                    var title = headers.item(headerIndex).textContent;
-                    if (title && !value.getAttributeNode('data-title')) {
-                        value.setAttribute('data-title', title);
-                    }
-
-                    var colspan = value.getAttributeNode('colspan');
-                    headerIndex += colspan ? parseInt(colspan.value) : 1;
+            var headers = element[0].querySelectorAll('tr > th');
+            if (headers.length) {
+                var rows = element[0].querySelectorAll('tbody > tr');
+                Array.prototype.forEach.call(rows, function(row) {
+                    var headerIndex = 0; 
+                    Array.prototype.forEach.call(row.querySelectorAll('td'), function (value, index) {
+                        var title = headers.item(headerIndex).textContent;
+                        if (title && !value.getAttributeNode('data-title')) {
+                            value.setAttribute('data-title', title);
+                        }
+    
+                        var colspan = value.getAttributeNode('colspan');
+                        headerIndex += colspan ? parseInt(colspan.value) : 1;
+                    });
                 });
             }
         }

src/directive.js

@@ -47,6 +47,47 @@ describe('directive', function () {
 		expect(firstDataRow.eq(1).attr('data-title')).toBe('Forth title');
 	});
 
+	it('support tables with multiple static rows', function () {
+		var markup = [
+		    '<table wt-responsive-table>',
+		    '    <thead>',
+		    '        <tr>',
+		    '            <th>First title</th>',
+		    '            <th>Second title</th>',
+		    '            <th>Third title</th>',
+		    '            <th>Forth title</th>',
+		    '        </tr>',
+		    '    </thead>',
+		    '    <tbody>',
+		    '        <tr>',
+		    '            <td>First column</td>',
+		    '            <td>Second column</td>',
+		    '            <td>Third column</td>',
+		    '            <td>Forth column</td>',
+		    '        </tr>',
+		    '        <tr>',
+		    '            <td>First column</td>',
+		    '            <td>Second column</td>',
+		    '            <td>Third column</td>',
+		    '            <td>Forth column</td>',
+		    '        </tr>',
+		    '    </tbody>',
+		    '</table>'
+		].join('');
+		var element = angular.element(markup);
+
+		var rows = element.find('tbody tr');
+
+		$compile(element);
+
+		rows.each(function (index, element) {
+			var titles = Array.prototype.map.call(element.querySelectorAll('td'), function (item) {
+				return item.getAttribute('data-title');
+			});
+			expect(titles).toEqual(['First title', 'Second title', 'Third title', 'Forth title']);
+		});
+	});
+
 	it('supports ng-repeat applied on TR', function () {
 		var markup = [
 		    '<table wt-responsive-table>',
@@ -83,7 +124,7 @@ describe('directive', function () {
 		expect(firstDataRow.eq(3).attr('data-title')).toBe('Forth title');
 	});
 
-	fit('supports bootstrap', function () {
+	it('supports bootstrap', function () {
 		var markup = [
 		    '<table wt-responsive-table class="table" style="display: none;">',
 		    '    <thead>',