<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="lodash.js@2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="app" ng-controller="AppCtrl">
<input type="text" ng-model="searchText" />
<select ng-model="sortPrimary" ng-options="key for key in sortPrimaryOptions"></select>
<select ng-model="sortSecondary" ng-options="key for key in sortSecondaryOptions"></select>
<ul>
<li ng-repeat="person in users | orderBy:[sortPrimary, sortSecondary] | filter:searchText">
<span>{{person.name}}</span>
<span>{{person.age}}</span>
<span>{{person.role}}</span>
</li>
</ul>
<script src="script.js"></script>
</body>
</html>
// Code goes here
module = angular.module('app', []);
module.controller("AppCtrl", function($scope, $http) {
$scope.sortPrimary = 'role'
$scope.sortSecondary = 'name'
$scope.sortPrimaryOptions = ['role', 'name', 'age'];
$scope.sortSecondaryOptions = ['role', 'name', 'age'];
$http.get('users.json').success(function(data) {
$scope.users = data;
})
});
/* Styles go here */
ul {
list-style:none;
}
span {
display: inline-block;
width: 100px;
}
input
{
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
width: 200px;
}
input:focus { outline: none; }
[
{
"name": "Leslie",
"age": 39,
"role": "user"
},
{
"name": "Finn",
"age": 25,
"role": "admin"
},
{
"name": "Cameran",
"age": 39,
"role": "admin"
},
{
"name": "Alfreda",
"age": 26,
"role": "admin"
},
{
"name": "Holmes",
"age": 34,
"role": "user"
},
{
"name": "Imani",
"age": 25,
"role": "admin"
},
{
"name": "Kasimir",
"age": 34,
"role": "admin"
},
{
"name": "Sydnee",
"age": 37,
"role": "admin"
},
{
"name": "Felix",
"age": 36,
"role": "admin"
},
{
"name": "Timothy",
"age": 38,
"role": "admin"
},
{
"name": "Hayfa",
"age": 26,
"role": "user"
},
{
"name": "Noelani",
"age": 23,
"role": "user"
},
{
"name": "Maggy",
"age": 30,
"role": "admin"
},
{
"name": "Winifred",
"age": 35,
"role": "admin"
},
{
"name": "Kameko",
"age": 22,
"role": "admin"
},
{
"name": "Hedley",
"age": 20,
"role": "user"
},
{
"name": "Kieran",
"age": 30,
"role": "admin"
},
{
"name": "Catherine",
"age": 30,
"role": "admin"
},
{
"name": "Judah",
"age": 39,
"role": "user"
},
{
"name": "Nero",
"age": 39,
"role": "user"
},
{
"name": "Lavinia",
"age": 38,
"role": "user"
},
{
"name": "Kirestin",
"age": 36,
"role": "admin"
},
{
"name": "Shoshana",
"age": 19,
"role": "admin"
},
{
"name": "Jermaine",
"age": 22,
"role": "user"
},
{
"name": "Jeanette",
"age": 34,
"role": "admin"
},
{
"name": "Scarlet",
"age": 33,
"role": "user"
},
{
"name": "Amal",
"age": 21,
"role": "admin"
},
{
"name": "Knox",
"age": 26,
"role": "admin"
},
{
"name": "Baker",
"age": 23,
"role": "admin"
},
{
"name": "Zephr",
"age": 37,
"role": "admin"
},
{
"name": "Kevin",
"age": 20,
"role": "user"
},
{
"name": "Jolene",
"age": 23,
"role": "admin"
},
{
"name": "Zeph",
"age": 32,
"role": "user"
},
{
"name": "Christian",
"age": 38,
"role": "user"
},
{
"name": "Deacon",
"age": 40,
"role": "admin"
},
{
"name": "Maya",
"age": 21,
"role": "user"
},
{
"name": "Ora",
"age": 38,
"role": "admin"
},
{
"name": "Fiona",
"age": 40,
"role": "admin"
},
{
"name": "Adria",
"age": 34,
"role": "user"
},
{
"name": "Samuel",
"age": 25,
"role": "admin"
},
{
"name": "Xena",
"age": 35,
"role": "user"
},
{
"name": "Branden",
"age": 39,
"role": "user"
},
{
"name": "Evelyn",
"age": 20,
"role": "admin"
},
{
"name": "Karleigh",
"age": 27,
"role": "admin"
},
{
"name": "Hasad",
"age": 34,
"role": "admin"
},
{
"name": "Darryl",
"age": 26,
"role": "user"
},
{
"name": "Kendall",
"age": 36,
"role": "user"
},
{
"name": "Tucker",
"age": 19,
"role": "admin"
},
{
"name": "Declan",
"age": 31,
"role": "admin"
},
{
"name": "Asher",
"age": 25,
"role": "user"
},
{
"name": "Uriah",
"age": 27,
"role": "admin"
},
{
"name": "Holly",
"age": 26,
"role": "user"
},
{
"name": "Shelley",
"age": 23,
"role": "admin"
},
{
"name": "Alexander",
"age": 28,
"role": "user"
},
{
"name": "Miranda",
"age": 25,
"role": "user"
},
{
"name": "Josiah",
"age": 23,
"role": "user"
},
{
"name": "Acton",
"age": 23,
"role": "admin"
},
{
"name": "Ezra",
"age": 30,
"role": "user"
},
{
"name": "Audrey",
"age": 31,
"role": "user"
},
{
"name": "Ursula",
"age": 31,
"role": "user"
},
{
"name": "Cecilia",
"age": 26,
"role": "user"
},
{
"name": "Macaulay",
"age": 30,
"role": "user"
},
{
"name": "Calvin",
"age": 30,
"role": "user"
},
{
"name": "Preston",
"age": 32,
"role": "user"
},
{
"name": "Hadassah",
"age": 27,
"role": "admin"
},
{
"name": "Tanisha",
"age": 18,
"role": "admin"
},
{
"name": "Lacota",
"age": 35,
"role": "admin"
},
{
"name": "Willa",
"age": 26,
"role": "admin"
},
{
"name": "Patience",
"age": 34,
"role": "admin"
},
{
"name": "Calista",
"age": 34,
"role": "admin"
},
{
"name": "Vernon",
"age": 38,
"role": "user"
},
{
"name": "Trevor",
"age": 35,
"role": "admin"
},
{
"name": "Aristotle",
"age": 38,
"role": "admin"
},
{
"name": "Reece",
"age": 26,
"role": "admin"
},
{
"name": "Kirsten",
"age": 33,
"role": "admin"
},
{
"name": "Venus",
"age": 18,
"role": "admin"
},
{
"name": "Blaine",
"age": 40,
"role": "user"
},
{
"name": "Jesse",
"age": 27,
"role": "admin"
},
{
"name": "Eric",
"age": 35,
"role": "admin"
},
{
"name": "Aristotle",
"age": 29,
"role": "user"
},
{
"name": "Emi",
"age": 23,
"role": "admin"
},
{
"name": "Neve",
"age": 33,
"role": "user"
},
{
"name": "Damian",
"age": 28,
"role": "user"
},
{
"name": "Edward",
"age": 26,
"role": "admin"
},
{
"name": "Aiko",
"age": 22,
"role": "admin"
},
{
"name": "Yeo",
"age": 24,
"role": "admin"
},
{
"name": "Liberty",
"age": 40,
"role": "admin"
},
{
"name": "Donna",
"age": 37,
"role": "user"
},
{
"name": "Carla",
"age": 32,
"role": "user"
},
{
"name": "Hedley",
"age": 30,
"role": "admin"
},
{
"name": "Phyllis",
"age": 37,
"role": "admin"
},
{
"name": "Oren",
"age": 40,
"role": "user"
},
{
"name": "Chaney",
"age": 39,
"role": "user"
},
{
"name": "Nola",
"age": 28,
"role": "user"
},
{
"name": "Yuli",
"age": 23,
"role": "admin"
},
{
"name": "Stacy",
"age": 19,
"role": "admin"
},
{
"name": "Prescott",
"age": 18,
"role": "user"
},
{
"name": "Kerry",
"age": 21,
"role": "user"
},
{
"name": "Alden",
"age": 30,
"role": "admin"
},
{
"name": "Quail",
"age": 28,
"role": "admin"
}
]