feat(ngTable): add title-alt for displaying an alternative header tit…

…le for responsive tables
esvit · Feb 10, 2015 · afc1423 · afc1423
1 parent 88f8a40
commit afc1423
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git a/examples/demo32.html b/examples/demo32.html
@@ -77,10 +77,10 @@ <h1>Responsive table</h1>
 
     <table ng-table="tableParams" show-filter="true" class="table table-bordered table-striped">
         <tr ng-repeat="user in $data">
-            <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
+            <td title="'Full Name'" title-alt="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
                 {{user.name}}
             </td>
-            <td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">
+            <td title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">
                 {{user.age}}
             </td>
         </tr>

diff --git a/src/ng-table/header.html b/src/ng-table/header.html
@@ -15,7 +15,7 @@
     </th>
 </tr>
 <tr ng-show="show_filter" class="ng-table-filters">
-    <th data-title-text="{{column.title(this)}}" ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
+    <th data-title-text="{{column.titleAlt(this) || column.title(this)}}" ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
         <div ng-repeat="(name, filter) in column.filter(this)">
             <div ng-if="filter.indexOf('/') !== -1" ng-include="filter"></div>
             <div ng-if="filter.indexOf('/') === -1" ng-include="'ng-table/filters/' + filter + '.html'"></div>

diff --git a/src/scripts/04-controller.js b/src/scripts/04-controller.js
@@ -190,7 +190,8 @@ app.factory('ngTableColumn', [function () {
         headerTitle: function(){ return ' '; },
         sortable: function(){ return false; },
         show: function(){ return true; },
-        title: function(){ return ' '; }
+        title: function(){ return ' '; },
+        titleAlt: function(){ return ''; }
     };
 
     function buildColumn(column){

diff --git a/src/scripts/05-directive.js b/src/scripts/05-directive.js
@@ -60,7 +60,7 @@ app.directive('ngTable', ['$q', '$parse',
                         };
                     };
 
-                    var titleExpr = getAttrValue('title');
+                    var titleExpr = getAttrValue('title-alt') || getAttrValue('title');
                     if (titleExpr){
                         el.attr('data-title-text', '{{' + titleExpr + '}}'); // this used in responsive table
                     }
@@ -69,6 +69,7 @@ app.directive('ngTable', ['$q', '$parse',
                     columns.push({
                         id: i++,
                         title: parsedAttribute('title'),
+                        titleAlt: parsedAttribute('title-alt'),
                         headerTitle: parsedAttribute('header-title'),
                         sortable: parsedAttribute('sortable'),
                         'class': parsedAttribute('header-class'),

diff --git a/test/tableSpec.js b/test/tableSpec.js
@@ -186,6 +186,51 @@ describe('ng-table', function() {
         }));
     });
 
+    describe('title-alt', function() {
+
+        var elm;
+        beforeEach(inject(function($compile, NgTableParams) {
+            elm = angular.element(
+                    '<table ng-table="tableParams">' +
+                    '<tr ng-repeat="user in $data">' +
+                    '<td title="\'Name of person\'" title-alt="\'Name\'">{{user.name}}</td>' +
+                    '<td title="\'Age of person\'" data-title-alt="\'Age\'">{{user.age}}</td>' +
+                    '<td title="\'Money earned\'" x-data-title-alt="\'£\'">{{user.money}}</td>' +
+                    '</tr>' +
+                    '</table>');
+
+            $compile(elm)(scope);
+            scope.$digest();
+
+            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);
+                }
+            });
+            scope.tableParams = params;
+            scope.$digest();
+        }));
+
+        it('should show as data-title-text', inject(function($compile) {
+            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');
+            expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
+            expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('£');
+
+            var dataRows = elm.find('tbody').find('tr');
+            var dataCells = angular.element(dataRows[0]).find('td');
+            expect(angular.element(dataCells[0]).attr('data-title-text').trim()).toBe('Name');
+            expect(angular.element(dataCells[1]).attr('data-title-text').trim()).toBe('Age');
+            expect(angular.element(dataCells[2]).attr('data-title-text').trim()).toBe('£');
+        }));
+    });
+
     describe('sorting', function() {
 
         it('should provide column definition', inject(function($compile) {