feat(directive+header): add data-title-text attribute to table cells

The *parsed* value of the data-title is now added as a data-title-text attribute to tbody TD's and the TH's of the filter row.

This is useful for displaying the table in "card view" on smal screens. For example:

http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

src/ng-table/header.html

@@ -15,7 +15,7 @@
     </th>
 </tr>
 <tr ng-show="show_filter" class="ng-table-filters">
-    <th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
+    <th data-title-text="{{parse(column.title)}}" ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
         <div ng-repeat="(name, filter) in column.filter">
             <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL">
                 <div ng-include="column.filterTemplateURL"></div>

src/scripts/05-directive.js

@@ -46,9 +46,15 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
                     if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
                         return;
                     }
+
+                    var getAttrValue = function(attr){
+                        return el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr);
+                    };
+
                     var parsedAttribute = function(attr, defaultValue) {
                         return function(scope) {
-                            return $parse(el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr))(scope, {
+                            var expr = getAttrValue(attr);
+                            return $parse(expr)(scope, {
                                 $columns: columns
                             }) || defaultValue;
                         };
@@ -69,7 +75,10 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
                         delete filter.templateURL;
                     }
 
-                    el.attr('data-title-text', parsedTitle()); // this used in responsive table
+                    var titleExpr = getAttrValue('title');
+                    if (titleExpr){
+                        el.attr('data-title-text', '{{' + titleExpr + '}}'); // this used in responsive table
+                    }
                     columns.push({
                         id: i++,
                         title: parsedTitle,

test/tableSpec.js

@@ -234,4 +234,33 @@ describe('ng-table', function() {
         expect(rows.length).toBe(7);
     }));
 
+    it('should show data-title-text', inject(function($compile, $rootScope, NgTableParams) {
+        var tbody = elm.find('tbody');
+
+        var params = new NgTableParams({
+            page: 1, // show first page
+            count: 10 // count per page
+        }, {
+            total: data.length, // length of data
+            getData: function($defer, params) {
+                $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+            }
+        });
+        scope.tableParams = params;
+        scope.$digest();
+
+        var filterRow = angular.element(elm.find('thead').find('tr')[1]);
+        var filterCells = filterRow.find('th');
+        expect(angular.element(filterCells[0]).attr('data-title-text').trim()).toBe('Name of person');
+        expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
+        expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('Money');
+
+        var dataRows = elm.find('tbody').find('tr');
+        var row = angular.element(dataRows[0]);
+        var cells = row.find('td');
+        expect(angular.element(cells[0]).attr('data-title-text').trim()).toBe('Name of person');
+        expect(angular.element(cells[1]).attr('data-title-text').trim()).toBe('Age');
+        expect(angular.element(cells[2]).attr('data-title-text').trim()).toBe('Money');
+    }));
+
 });