-
Notifications
You must be signed in to change notification settings - Fork 0
/
step-08.html
120 lines (112 loc) · 3.74 KB
/
step-08.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!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>
<a href ng-click="sortMultiple(['year','height'])">Year then Height</a>
<p><strong>Limit data to:</strong>
<a href ng-click="limitToChina()">China</a> |
<a href ng-click="limitTo('country')">Country</a> |
<a href ng-click="limitTo('city')">City</a> |
<a href ng-click="limitTo('floors')">Floors</a> |
<a href ng-click="limitTo('year')">Year</a>
<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];
});
};
$scope.sortBy = function sortBy(field) {
// lodash sort by "iteratee"
$scope.buildings = _.sortBy(buildings, field);
};
$scope.sortMultiple = function sortMultiple(fields) {
// lodash can sort by multiple fields
$scope.buildings = _.sortByAll(buildings, fields);
};
$scope.limitToChina1 = function limitToChina1() {
// filtering with a for loop
$scope.buildings = [];
for (var i = 0; i < buildings.length; i++) {
if (buildings[i].country == 'China') {
$scope.buildings.push(buildings[i]);
}
}
};
$scope.limitToChina2 = function limitToChina2() {
// filtering with Array.prototype.forEach
$scope.buildings = [];
buildings.forEach(function(building) {
if (building.country == 'China') {
$scope.buildings.push(building);
}
});
};
$scope.limitToChina3 = function limitToChina3() {
// filtering with Array.prototype.filter
$scope.buildings = buildings.filter(function(building) {
return (building.country == 'China');
});
};
$scope.limitToChina4 = function limitToChina4(field) {
// filtering with _.where()
$scope.buildings = _.where(buildings, {'country':'China'});
// but is _.where() fast?
// perf test: http://jsperf.com/array-prototype-filter-vs-lodash-where
// # of iterations is super high
// actually faster on FireFox
};
$scope.limitTo = function limitTo(field) {
// build up a criteria field
var criteria = {};
criteria[field] = value;
// oh but wait, _.where() uses strict comparison
$scope.buildings = _.where(buildings, criteria);
};
// END OUR FUNCTIONS
});
</script>