Sorting table with angular

Below is a demo of sorting a table with Angular.
-----------

table will be ordered by {{orderBy}}

name	age	gender	email	salary
{{employee.name}}	{{employee.age}}	{{employee.gender}}	{{employee.email}}	{{employee.salary}}

-----

codes

-----

	<!DOCTYPE html>
	<html ng-app="myModule">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>hello world</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script type="text/javascript" src="sj.js"></script>
	<style>
	table {
	border-collapse: collapse;
	}

	table, td, th {
	border: 1px solid black;
	padding: 4px;
	}
	</style>
	</head>
	<body ng-controller="myController">
	<div><h1>Employees</h1></div>
	<div>
	<select name="order by" ng-model="orderBy">
	<option value="name">Name</option>
	<option value="age">Age</option>
	<option value="com">company</option>
	<option value="-salary">Salary DEC</option>
	</select>
	<p>table will be ordered by {{orderBy}}</p>
	<br><br>
	</div>
	<div>
	<table>
	<thead>
	<tr>
	<th>name</th>
	<th>age</th>
	<th>eyecolor</th>
	<th>gender</th>
	<th>com</th>
	<th>email</th>
	<th>salary</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="employee in employees \| orderBy:orderBy">
	<td> {{employee.name}} </td>
	<td>{{employee.age}}</td>
	<td>{{employee.eyecolor}}</td>
	<td>{{employee.gender}}</td>
	<td>{{employee.com}}</td>
	<td>{{employee.email}}</td>
	<td>{{employee.salary}}</td>
	</tr>
	</tbody>
	</table>
	</div>

	</body>
	</html>

view raw hello.html hosted with ❤ by GitHub

	angular
	.module("myModule", [])
	.controller('myController', function($scope)
	{
	$scope.employees=employees;
	$scope.orderBy="name";
	});


	var employees = [
	{
	"name": "Julianne Meadows",
	"age": 22,
	"eyeColor": "brown",
	"gender": "female",
	"company": "ZOID",
	"email": "juliannemeadows@zoid.com",
	"phone": "+91 (922) 430-3565",
	"salary": 170539
	},
	{
	"name": "Maggie York",
	"age": 23,
	"eyeColor": "green",
	"gender": "female",
	"company": "INTRADISK",
	"email": "maggieyork@intradisk.com",
	"phone": "+91 (882) 504-3554",
	"salary": 24686
	},
	{
	"name": "Marquez Wheeler",
	"age": 26,
	"eyeColor": "green",
	"gender": "male",
	"company": "PORTALIS",
	"email": "marquezwheeler@portalis.com",
	"phone": "+91 (957) 521-3390",
	"salary": 28090
	},
	{
	"name": "Gayle Bowman",
	"age": 29,
	"eyeColor": "green",
	"gender": "female",
	"company": "IMMUNICS",
	"email": "gaylebowman@immunics.com",
	"phone": "+91 (829) 490-3594",
	"salary": 26313
	},
	{
	"name": "Hicks Charles",
	"age": 34,
	"eyeColor": "green",
	"gender": "male",
	"company": "HELIXO",
	"email": "hickscharles@helixo.com",
	"phone": "+91 (852) 558-3308",
	"salary": 18556
	},
	{
	"name": "Sasha Zimmerman",
	"age": 23,
	"eyeColor": "blue",
	"gender": "female",
	"company": "ZIZZLE",
	"email": "sashazimmerman@zizzle.com",
	"phone": "+91 (965) 513-3807",
	"salary": 20159
	},
	{
	"name": "Roxanne Gilbert",
	"age": 40,
	"eyeColor": "brown",
	"gender": "female",
	"company": "BUZZWORKS",
	"email": "roxannegilbert@buzzworks.com",
	"phone": "+91 (971) 440-2940",
	"salary": 217900
	}
	];

view raw sj.js hosted with ❤ by GitHub

mycolorpad