Skip to content

Instantly share code, notes, and snippets.

@datchley

datchley/index.html

Created March 8, 2015 05:58
Show Gist options
  • Save datchley/b888f1c990cb57bf1f8f to your computer and use it in GitHub Desktop.
Save datchley/b888f1c990cb57bf1f8f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/qiyuqapelu
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
td.sorted {
font-weight: 900;
}
td i.fa-sort {
color: #ccc;
}
</style>
</head>
<body ng-controller="myController">
<h3>Table</h3>
<table bh-table data="data" meta="meta" class="table table-striped table-hover">
<thead>
<tr>
<td ng-repeat="column in meta" col-id="{{meta[$index].name}}" ng-class="getSortClass(meta[$index].name)">
<i ng-class="getSortIconClass(column.name)"></i> <a href="">{{column.description}}</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data | orderBy:orderByCol:reverseSort">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.modified | date}}</td>
</tr>
<tr>
<td colspan="4" class="small text-muted" style="opacity: .4;">
Order by: <strong>{{orderByCol}}<strong> : <strong>{{reverseSort ? 'desc' : 'asc'}}</strong>
</td>
</tr>
</tbody>
</bh-table>
<script id="jsbin-javascript">
angular.module('app', [])
.controller('myController', ['$scope', function($scope) {
$scope.data = [
{ id: 1, name: 'Dave', age: 39, modified: Date.now() },
{ id: 2, name: 'Kurt', age: 43, modified: Date.now() },
{ id: 3, name: 'Mitch', age: 45, modified: Date.now() },
{ id: 4, name: 'Jay', age: 42, modified: Date.now() }
];
$scope.meta = [
{ description: 'Id', name: 'id'},
{ description: 'Name', name: 'name' },
{ description: 'Age', name: 'age' },
{ description: 'Modified', name: 'modified' }
];
}])
.directive('bhTable', function() {
return {
restrict: 'EA',
/*scope: {
data: '=',
meta: '=',
orderByCol: '=?',
reverseSort: '=?'
},
*/
scope: true,
link: function($scope, $elm, attr) {
$scope.orderByCol = 'id';
$scope.reverseSort = typeof $scope.reverseSort !== 'undefined' ? $scope.reverseSort : true;
$scope.getSortIconClass = function(name) {
classes = ['fa'];
if (name === $scope.orderByCol) {
classes.push($scope.reverseSort ? 'fa-sort-down' : 'fa-sort-up');
}
else {
classes.push('fa-sort');
}
return classes;
};
$scope.getSortClass = function(name) {
return name == $scope.orderByCol ? 'sorted' : '';
};
$elm.on('click', 'thead td a', function(ev) {
var $target = $(ev.currentTarget),
prop = $target.parent('td').attr('col-id');
$elm.find('td').removeClass('sorted');
$target.parent('td').addClass('sorted');
$scope.$apply(function() {
$scope.orderByCol = prop;
$scope.reverseSort = !$scope.reverseSort;
});
});
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="myController">
<h3>Table</h3>
<table bh-table data="data" meta="meta" class="table table-striped table-hover">
<thead>
<tr>
<td ng-repeat="column in meta" col-id="{{meta[$index].name}}" ng-class="getSortClass(meta[$index].name)">
<i ng-class="getSortIconClass(column.name)"></i> <a href="">{{column.description}}</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data | orderBy:orderByCol:reverseSort">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.modified | date}}</td>
</tr>
<tr>
<td colspan="4" class="small text-muted" style="opacity: .4;">
Order by: <strong>{{orderByCol}}<strong> : <strong>{{reverseSort ? 'desc' : 'asc'}}</strong>
</td>
</tr>
</tbody>
</bh-table>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">td.sorted {
font-weight: 900;
}
td i.fa-sort {
color: #ccc;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module('app', [])
.controller('myController', ['$scope', function($scope) {
$scope.data = [
{ id: 1, name: 'Dave', age: 39, modified: Date.now() },
{ id: 2, name: 'Kurt', age: 43, modified: Date.now() },
{ id: 3, name: 'Mitch', age: 45, modified: Date.now() },
{ id: 4, name: 'Jay', age: 42, modified: Date.now() }
];
$scope.meta = [
{ description: 'Id', name: 'id'},
{ description: 'Name', name: 'name' },
{ description: 'Age', name: 'age' },
{ description: 'Modified', name: 'modified' }
];
}])
.directive('bhTable', function() {
return {
restrict: 'EA',
/*scope: {
data: '=',
meta: '=',
orderByCol: '=?',
reverseSort: '=?'
},
*/
scope: true,
link: function($scope, $elm, attr) {
$scope.orderByCol = 'id';
$scope.reverseSort = typeof $scope.reverseSort !== 'undefined' ? $scope.reverseSort : true;
$scope.getSortIconClass = function(name) {
classes = ['fa'];
if (name === $scope.orderByCol) {
classes.push($scope.reverseSort ? 'fa-sort-down' : 'fa-sort-up');
}
else {
classes.push('fa-sort');
}
return classes;
};
$scope.getSortClass = function(name) {
return name == $scope.orderByCol ? 'sorted' : '';
};
$elm.on('click', 'thead td a', function(ev) {
var $target = $(ev.currentTarget),
prop = $target.parent('td').attr('col-id');
$elm.find('td').removeClass('sorted');
$target.parent('td').addClass('sorted');
$scope.$apply(function() {
$scope.orderByCol = prop;
$scope.reverseSort = !$scope.reverseSort;
});
});
}
};
});</script></body>
</html>
Raw
jsbin.qiyuqapelu.css
td.sorted {
font-weight: 900;
}
td i.fa-sort {
color: #ccc;
}
Raw
jsbin.qiyuqapelu.js
angular.module('app', [])
.controller('myController', ['$scope', function($scope) {
$scope.data = [
{ id: 1, name: 'Dave', age: 39, modified: Date.now() },
{ id: 2, name: 'Kurt', age: 43, modified: Date.now() },
{ id: 3, name: 'Mitch', age: 45, modified: Date.now() },
{ id: 4, name: 'Jay', age: 42, modified: Date.now() }
];
$scope.meta = [
{ description: 'Id', name: 'id'},
{ description: 'Name', name: 'name' },
{ description: 'Age', name: 'age' },
{ description: 'Modified', name: 'modified' }
];
}])
.directive('bhTable', function() {
return {
restrict: 'EA',
/*scope: {
data: '=',
meta: '=',
orderByCol: '=?',
reverseSort: '=?'
},
*/
scope: true,
link: function($scope, $elm, attr) {
$scope.orderByCol = 'id';
$scope.reverseSort = typeof $scope.reverseSort !== 'undefined' ? $scope.reverseSort : true;
$scope.getSortIconClass = function(name) {
classes = ['fa'];
if (name === $scope.orderByCol) {
classes.push($scope.reverseSort ? 'fa-sort-down' : 'fa-sort-up');
}
else {
classes.push('fa-sort');
}
return classes;
};
$scope.getSortClass = function(name) {
return name == $scope.orderByCol ? 'sorted' : '';
};
$elm.on('click', 'thead td a', function(ev) {
var $target = $(ev.currentTarget),
prop = $target.parent('td').attr('col-id');
$elm.find('td').removeClass('sorted');
$target.parent('td').addClass('sorted');
$scope.$apply(function() {
$scope.orderByCol = prop;
$scope.reverseSort = !$scope.reverseSort;
});
});
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment