<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Online table sorter and filterer</h1>
<div ng-controller="tableController">
any value: <input type="text" ng-model="f.$"/>
<table>
<tr>
<th><span ng-click="order='field1'">Value 1</span> <br/><input type="text" ng-model="f.field1"/></th>
<th ><span ng-click="order='field2'">Value 2</span> <br/><input type="text" ng-model="f.field2"/></th>
<th ><span ng-click="order='field3'">Value 3 </span> <br/><input type="text" ng-model="f.field2"/></th>
</tr>
<tr ng-repeat="r in data|filter:f|orderBy:order">
<td>{{r.field1}}</td>
<td>{{r.field2}}</td>
<td>{{r.field3}}</td>
</tr>
</tr>
</table>
</div>
</body>
</html>
// Code goes here
function tableController($scope){
$scope.data=[
{field1:"test1 ",field2:"value 2",field3:"value3"},
{field1:"test 2",field2:"value 2",field3:"value3"},
{field1:"ala",field2:"test",field3:"value3"},
{field1:"ala",field2:"ma",field3:"kota"},
{field1:"test 1",field2:"value 2",field3:"value3"},
{field1:"test 2",field2:"value 2",field3:"kota"},
{field1:"something 1",field2:"value 2",field3:"test"},
{field1:"other something",field2:"ma 2",field3:"value3"},
{field1:"other something",field2:"value 2",field3:"value3"},
{field1:"test 1",field2:"value 2",field3:"value3"},
{field1:"aaaa",field2:"aaa",field3:"aaa"}
];
}
/* Styles go here */
body{
font-family:verdana;
}
table{
width:100%;
padding:0px;
margin:0px;
border:1px solid gray;
border-spacing:0px;
}
th{
font-weight:bold;
background-color:silver;
border:1px solid gray;
}
td{
border:1px solid gray;
padding:5px;
}
tr:hover{
background-color:whitesmoke;
}