Skip to content

Commit

Permalink
refactor(column): renamed column to $column
Browse files Browse the repository at this point in the history 
Reasons for rename:
* avoid ambiguity with $columns use in header template and original column object's supplied to ngTableDynamic
* consistency with existing code that already uses $column as the symbol name

BREAKING CHANGE:

* Binding expressions used for generating `thead>th` attributes that reference the current column will need modifying

 Previously:
````
 <td title="getTitle(column)">
````

 Now:
 ````
  <td title="getTitle($column)">
 ````
  • Loading branch information
@ccrowhurstram
ccrowhurstram committed Feb 12, 2015
1 parent 03854d3 commit 7e8448d
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 55 deletions.
2 changes: 1 addition & 1 deletion src/ng-table/filters/select-multiple.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<select ng-options="data.id as data.title for data in column.data"
<select ng-options="data.id as data.title for data in $column.data"
ng-disabled="$filterRow.disabled"
multiple ng-multiple="true"
ng-model="params.filter()[name]"
Expand Down
2 changes: 1 addition & 1 deletion src/ng-table/filters/select.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<select ng-options="data.id as data.title for data in column.data"
<select ng-options="data.id as data.title for data in $column.data"
ng-disabled="$filterRow.disabled"
ng-model="params.filter()[name]"
ng-show="filter == 'select'"
Expand Down
24 changes: 12 additions & 12 deletions src/ng-table/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<tr>
<th title="{{column.headerTitle(this)}}"
ng-repeat="column in $columns"
<th title="{{$column.headerTitle(this)}}"
ng-repeat="$column in $columns"
ng-class="{
'sortable': column.sortable(this),
'sort-asc': params.sorting()[column.sortable(this)]=='asc',
'sort-desc': params.sorting()[column.sortable(this)]=='desc'
'sortable': $column.sortable(this),
'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
'sort-desc': params.sorting()[$column.sortable(this)]=='desc'
}"
ng-click="sortBy(column, $event)"
ng-show="column.show(this)"
ng-init="template = column.headerTemplateURL(this)"
class="header {{column.class(this)}}">
<div ng-if="!template" ng-show="!template" ng-bind="column.title(this)"></div>
ng-click="sortBy($column, $event)"
ng-show="$column.show(this)"
ng-init="template = $column.headerTemplateURL(this)"
class="header {{$column.class(this)}}">
<div ng-if="!template" ng-show="!template" ng-bind="$column.title(this)"></div>
<div ng-if="template" ng-show="template" ng-include="template"></div>
</th>
</tr>
<tr ng-show="show_filter" class="ng-table-filters">
<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)">
<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>
</div>
Expand Down
32 changes: 21 additions & 11 deletions src/scripts/04-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,20 +89,20 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
}
};

this.loadFilterData = function (columns) {
angular.forEach(columns, function (column) {
this.loadFilterData = function ($columns) {
angular.forEach($columns, function ($column) {
var def;
def = column.filterData($scope, {
$column: column
def = $column.filterData($scope, {
$column: $column
});
if (!def) {
delete column.filterData;
delete $column.filterData;
return;
}

// if we're working with a deferred object, let's wait for the promise
if ((angular.isObject(def) && angular.isObject(def.promise))) {
delete column.filterData;
delete $column.filterData;
return def.promise.then(function(data) {
// our deferred can eventually return arrays, functions and objects
if (!angular.isArray(data) && !angular.isFunction(data) && !angular.isObject(data)) {
Expand All @@ -114,12 +114,12 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
id: ''
});
}
column.data = data;
$column.data = data;
});
}
// otherwise, we just return what the user gave us. It could be a function, array, object, whatever
else {
return column.data = def;
return $column.data = def;
}
});
};
Expand Down Expand Up @@ -158,8 +158,8 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
}
};

$scope.sortBy = function(column, event) {
var parsedSortable = column.sortable && column.sortable();
$scope.sortBy = function($column, event) {
var parsedSortable = $column.sortable && $column.sortable();
if (!parsedSortable) {
return;
}
Expand All @@ -180,7 +180,7 @@ function($scope, NgTableParams, $timeout, $parse, $compile, $attrs, $element, ng
* @name ngTable.factory:ngTableColumn
*
* @description
* Service to construct a column definition used by {@link ngTable.directive:ngTable ngTable} directive
* Service to construct a $column definition used by {@link ngTable.directive:ngTable ngTable} directive
*/
app.factory('ngTableColumn', [function () {

Expand All @@ -196,6 +196,16 @@ app.factory('ngTableColumn', [function () {
titleAlt: function(){ return ''; }
};

/**
* @ngdoc method
* @name ngTable.factory:ngTableColumn#buildColumn
* @methodOf ngTable.factory:ngTableColumn
* @description Creates a $column for use within a header template
*
* @param {Object} column an existing $column or simple column data object
* @param {Scope} defaultScope the $scope to supply to the $column getter methods when not supplied by caller
* @returns {Object} a $column object
*/
function buildColumn(column, defaultScope){
// note: we're not modifying the original column object. This helps to avoid unintended side affects
var extendedCol = Object.create(column);
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/05-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ app.directive('ngTable', ['$q', '$parse',
if (titleExpr){
el.attr('data-title-text', '{{' + titleExpr + '}}'); // this used in responsive table
}
// NOTE TO MAINTAINERS: if you add extra fields to a column be sure to extend ngTableColumn with
// NOTE TO MAINTAINERS: if you add extra fields to a $column be sure to extend ngTableColumn with
// a corresponding "safe" default
columns.push({
id: i++,
Expand Down
7 changes: 3 additions & 4 deletions test/tableDynamicSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('ng-table-dynamic', function() {
'</div>');

function getCustomClass(parmasScope){
if (parmasScope.column.title().indexOf('Money') !== -1){
if (parmasScope.$column.title().indexOf('Money') !== -1){
return 'moneyHeaderClass';
} else{
return 'customClass';
Expand Down Expand Up @@ -289,9 +289,9 @@ describe('ng-table-dynamic', function() {

ageFilter = { age: 'text'};
function getFilter(paramsScope){
if (paramsScope.column.title() === 'Name of user') {
if (paramsScope.$column.title() === 'Name of user') {
return {username: 'text'};
} else if (paramsScope.column.title() === 'Age') {
} else if (paramsScope.$column.title() === 'Age') {
return ageFilter;
}
}
Expand All @@ -313,7 +313,6 @@ describe('ng-table-dynamic', function() {
expect(usernameInput.attr('name')).toBe('username');

var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
console.log(elm.find('thead').find('tr').eq(1).find('th'));
expect(ageInput.attr('type')).toBe('text');
expect(ageInput.attr('name')).toBe('age');
});
Expand Down
50 changes: 25 additions & 25 deletions test/tableSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ describe('ng-table', function() {
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td data-header-title="\'Sort by Name\'" data-title="nameTitle()" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass(column)">' +
'<td data-header-title="\'Sort by Name\'" data-title="nameTitle()" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass($column)">' +
'{{user.name}}' +
'</td>' +
'<td x-data-header-title="\'Sort by Age\'" x-data-title="ageTitle()" sortable="\'age\'" x-data-header-class="getCustomClass(column)">' +
'<td x-data-header-title="\'Sort by Age\'" x-data-title="ageTitle()" sortable="\'age\'" x-data-header-class="getCustomClass($column)">' +
'{{user.age}}' +
'</td>' +
'<td header-title="\'Sort by Money\'" title="moneyTitle()" filter="{ \'action\': \'select\' }" filter-data="money($column)" header-class="getCustomClass(column)">' +
'<td header-title="\'Sort by Money\'" title="moneyTitle()" filter="{ \'action\': \'select\' }" filter-data="money($column)" header-class="getCustomClass($column)">' +
'{{user.money}}' +
'</td>' +
'</tr>' +
Expand All @@ -56,8 +56,8 @@ describe('ng-table', function() {
return 'Money';
};

scope.getCustomClass = function(column){
if (column.title().indexOf('Money') !== -1){
scope.getCustomClass = function($column){
if ($column.title().indexOf('Money') !== -1){
return 'moneyHeaderClass';
} else{
return 'customClass';
Expand Down Expand Up @@ -243,17 +243,17 @@ describe('ng-table', function() {

describe('sorting', function() {

it('should provide column definition', inject(function($compile) {
it('should provide $column definition', inject(function($compile) {
var columnDef;
var elm = angular.element(
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td title="\'Age\'" sortable="captureColumn(column)">{{user.age}}</td>' +
'<td title="\'Age\'" sortable="captureColumn($column)">{{user.age}}</td>' +
'</tr>' +
'</table>');

scope.captureColumn = function(col){
columnDef = col;
scope.captureColumn = function($column){
columnDef = $column;
return 'age'
};

Expand All @@ -266,11 +266,11 @@ describe('ng-table', function() {

describe('filters', function(){

var columnDef;
var $capturedColumn;
beforeEach(inject(function() {
// stash a reference to column definition so that its available in asserts
scope.captureColumn = function (col) {
columnDef = col;
// stash a reference to $column definition so that its available in asserts
scope.captureColumn = function ($column) {
$capturedColumn = $column;
};
}));

Expand All @@ -282,7 +282,7 @@ describe('ng-table', function() {
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn(column)" title="\'Name\'" ' +
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
'filter="usernameFilter">{{user.name}}</td>' +
'</tr>' +
'</table>' +
Expand Down Expand Up @@ -313,9 +313,9 @@ describe('ng-table', function() {
});

it('should make filter def available on $column', function () {
expect(columnDef).toBeDefined();
expect(columnDef.filter).toBeDefined();
expect(columnDef.filter()['username']).toBe('text');
expect($capturedColumn).toBeDefined();
expect($capturedColumn.filter).toBeDefined();
expect($capturedColumn.filter()['username']).toBe('text');
});
});

Expand All @@ -328,7 +328,7 @@ describe('ng-table', function() {
'<script type="text/ng-template" id="ng-table/filters/customNum.html"><input type="number" id="{{name}}"/></script>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn(column)" title="\'Age\'" ' +
'<td header-class="captureColumn($column)" title="\'Age\'" ' +
'filter="{ \'age\': \'ng-table/filters/customNum.html\' }">{{user.age}}</td>' +
'</tr>' +
'</table>' +
Expand Down Expand Up @@ -356,7 +356,7 @@ describe('ng-table', function() {
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn(column)" title="\'Name\'" ' +
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
'filter="{ \'name\': \'text\', \'age\': \'text\' }">{{user.name}}</td>' +
'</tr>' +
'</table>' +
Expand Down Expand Up @@ -389,10 +389,10 @@ describe('ng-table', function() {
});

it('should make filter def available on $column', function () {
expect(columnDef).toBeDefined();
expect(columnDef.filter).toBeDefined();
expect(columnDef.filter()['name']).toBe('text');
expect(columnDef.filter()['age']).toBe('text');
expect($capturedColumn).toBeDefined();
expect($capturedColumn.filter).toBeDefined();
expect($capturedColumn.filter()['name']).toBe('text');
expect($capturedColumn.filter()['age']).toBe('text');
});
});
describe('dynamic filter', function(){
Expand All @@ -407,8 +407,8 @@ describe('ng-table', function() {
'<script type="text/ng-template" id="ng-table/filters/number.html"><input type="number" name="{{name}}"/></script>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td title="\'Name\'" filter="getFilter(column)">{{user.name}}</td>' +
'<td title="\'Age\'" filter="getFilter(column)">{{user.age}}</td>' +
'<td title="\'Name\'" filter="getFilter($column)">{{user.name}}</td>' +
'<td title="\'Age\'" filter="getFilter($column)">{{user.age}}</td>' +
'</tr>' +
'</table>' +
'</div>');
Expand Down

0 comments on commit 7e8448d

Please sign in to comment.