-
Notifications
You must be signed in to change notification settings - Fork 0
/
step-01.html
67 lines (59 loc) · 1.6 KB
/
step-01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang=en>
<head>
<title>Hands on with lodash</title>
<script src=js/angular.js></script>
<script src=js/lodash.js></script>
<script src=js/buildings.js></script>
<link href=css/main.css rel=stylesheet>
</head>
<body ng-app=myapp>
<div ng-controller=BuildingsController>
<h2>World's 50 Largest Buildings</h2>
<p><strong>Sort By:</strong>
<a href ng-click="sortBy('name')">Name</a> |
<a href ng-click="sortBy('country')">Country</a> |
<a href ng-click="sortBy('city')">City</a> |
<a href ng-click="sortBy('floors')">Floors</a> |
<a href ng-click="sortBy('year')">Year</a>
<p><strong>Sort By Multiple:</strong>
<p><strong>Limit data to:</strong>
<p><strong>Tell me:</strong>
<p>
<a href ng-click="reset()">(Reset)</a>
<table>
<tr>
<th>Rank
<th>Name
<th>Country
<th>City
<th>Height
<th>Floors
<th>Year
<tr ng-repeat="building in buildings">
<td>{{building.rank}}
<td>{{building.name}}
<td>{{building.country}}
<td>{{building.city}}
<td>{{building.height}} ft
<td>{{building.floors}}
<td>{{building.year}}
</table>
</div>
<script>
angular.module("myapp", [])
.controller("BuildingsController", function($scope) {
$scope.reset = function reset() {
$scope.buildings = buildings;
};
$scope.reset();
// OUR FUNCTIONS
$scope.sortBy = function sortBy(field) {
// JavaScript's built-in sort function
$scope.buildings = buildings.sort(function(a, b) {
return a[field] > b[field];
});
};
// END OUR FUNCTIONS
});
</script>