W3-Angular
Angular-API reference
Angular-Tutorial
Angular-Developer guide
Angular-IE Compatability
1.) Click the table headers to change the sorting order
2.) Do clicks and right-clicks!
3.) Remove "| filter:test" form the row (tr) declaration if you don't want filtering.
test filters on all columns, to filter on one specific column, say on column "name", specify test.name/test.country
Angular-API reference
Angular-Tutorial
Angular-Developer guide
Angular-IE Compatability
Table sorting
1.) Click the table headers to change the sorting order
2.) Do clicks and right-clicks!
3.) Remove "| filter:test" form the row (tr) declaration if you don't want filtering.
test filters on all columns, to filter on one specific column, say on column "name", specify test.name/test.country
Filter:
| Name | Country |
|---|---|
| {{x.name}} | {{x.country}} |
// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js
// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js.map
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" style="width: 300px;"><tbody>
<tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr>
<tr ng-click="rowclick()" ng-right-click="rightclick()" ng-repeat="x in names | orderBy:propertyName:reverse"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr>
</tbody></table>
</div>
<script>
var app = angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.propertyName = 'name';
$scope.reverse = true;
$scope.orderByMe = function(propertyName ) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
}
$scope.rowclick= function(){
alert(this.x.country);
}
$scope.rightclick= function(scope,evt){
alert(this.x.name);
}
});
// when you want to apply the directive on an html element, you have to write, i.e.: <span ng-right-click>
// when you create the directive you have to use camelCase !!! - see example below:
app.directive('ngRightClick', function($parse) {
return function(scope, element, attrs) {
var fn = $parse(attrs.ngRightClick);
element.bind('contextmenu', function(event) {
scope.$apply(function() {
event.preventDefault();
fn(scope, {$event:event});
});
});
};
});
</script>
Using an object as a filter:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {});
</script>
</head>
<body ng-controller="MainCtrl">
<div ng-init="users = [{name:'John', phone:'555-1276', secret:'shhh'},
{name:'Mary', phone:'800-BIG-MARY', secret:'psst'},
{name:'Mike', phone:'555-4321', secret:'shhh'},
{name:'Adam', phone:'555-5678', secret:'shhh'},
{name:'Julie', phone:'555-8765', secret:'shhh'}]"></div>
Name: <input ng-model="search.name"/><br>
Phone: <input ng-model="search.phone"/><br>
Secret: <input ng-model="search.secret"/><br>
<table>
// anonymous object !
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.secret}}</td>
</tr>
</table>
</body>
</html>
Custom formatters
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>
