Skip to content

Commit

Permalink
feat(header): header-title
Browse files Browse the repository at this point in the history 
Use header-title to add a title attribute to the TH tag
  • Loading branch information
@ccrowhurstram
ccrowhurstram committed Jan 23, 2015
2 parents ac46465 + 186371a commit 502b717
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 4 deletions.
101 changes: 101 additions & 0 deletions examples/demo31.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="../dist/ng-table.js"></script>
<link rel="stylesheet" href="../dist/ng-table.css">
</head>
<body ng-app="main">

<h1>Table with custom header sort titles</h1>

<div ng-controller="DemoCtrl">

<table ng-table="tableParams" show-filter="true" class="table ng-table-rowselected">
<tr ng-repeat="user in $data"
ng-click="user.$selected = !user.$selected; changeSelection(user)"
ng-class="{'active': user.$selected}">
<td header-title="'Sort by Name'" data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
{{user.name}}
</td>
<td header-title="'Sort by Age'" data-title="'Age'" class="text-right" sortable="'age'" filter="{ 'age': 'text' }">
{{user.age}}
</td>
</tr>
</table>


<script>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function ($scope, $filter, NgTableParams) {
var data = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.data = data;

$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10, // count per page
filter: {
//name: 'M' // initial filter
},
sorting: {
//name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;

params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

$scope.changeSelection = function(user) {
// console.info(user);
}
})
</script>

</div>


</body>
</html>
3 changes: 2 additions & 1 deletion src/ng-table/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<tr>
<th ng-repeat="column in $columns"
<th title="{{column.headerTitle(this)}}"
ng-repeat="column in $columns"
ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
Expand Down
1 change: 1 addition & 0 deletions src/scripts/05-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
columns.push({
id: i++,
title: parsedTitle,
headerTitle: parsedAttribute('header-title', ' '),
sortable: parsedAttribute('sortable', false),
'class': parsedAttribute('header-class', ''),
filter: filter,
Expand Down
17 changes: 14 additions & 3 deletions test/tableSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,13 @@ describe('ng-table', function() {
'<script type="text/ng-template" id="ng-table/filters/money.html"></script>' +
'<table ng-table="tableParams" show-filter="true">' +
'<tr ng-repeat="user in $data">' +
'<td data-title="\'Name of person\'" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass(column)">' +
'<td data-header-title="\'Sort by Name\'" data-title="\'Name of person\'" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass(column)">' +
'{{user.name}}' +
'</td>' +
'<td x-data-title="\'Age\'" sortable="\'age\'" x-data-header-class="getCustomClass(column)">' +
'<td x-data-header-title="\'Sort by Age\'" x-data-title="\'Age\'" sortable="\'age\'" x-data-header-class="getCustomClass(column)">' +
'{{user.age}}' +
'</td>' +
'<td title="\'Money\'" filter="{ \'action\': \'money\' }" filter-data="money($column)" header-class="getCustomClass(column)">' +
'<td header-title="\'Sort by Money\'" title="\'Money\'" filter="{ \'action\': \'money\' }" filter-data="money($column)" header-class="getCustomClass(column)">' +
'{{user.money}}' +
'</td>' +
'</tr>' +
Expand Down Expand Up @@ -187,6 +187,17 @@ describe('ng-table', function() {
expect(angular.element(titles[2]).hasClass('moneyHeaderClass')).toBeTruthy();
}));

it('should create table header titles', inject(function($compile, $rootScope) {

var thead = elm.find('thead');
var rows = thead.find('tr');
var titles = angular.element(rows[0]).find('th');

expect(angular.element(titles[0]).attr('title').trim()).toBe('Sort by Name');
expect(angular.element(titles[1]).attr('title').trim()).toBe('Sort by Age');
expect(angular.element(titles[2]).attr('title').trim()).toBe('Sort by Money');
}));


it('should show scope data', inject(function($compile, $rootScope, NgTableParams) {
var tbody = elm.find('tbody');
Expand Down

0 comments on commit 502b717

Please sign in to comment.