Permalink
Browse files

Add search feature

  • Loading branch information...
mraible committed Oct 17, 2016
1 parent 07bf004 commit 652ee29d9a002f5d437d356481809fe74114fe7e
View
@@ -0,0 +1,35 @@
[
{
"id": 1,
"name": "Peyton Manning",
"phone": "(303) 567-8910",
"address": {
"street": "1234 Main Street",
"city": "Greenwood Village",
"state": "CO",
"zip": "80111"
}
},
{
"id": 2,
"name": "Demaryius Thomas",
"phone": "(720) 213-9876",
"address": {
"street": "5555 Marion Street",
"city": "Denver",
"state": "CO",
"zip": "80202"
}
},
{
"id": 3,
"name": "Von Miller",
"phone": "(917) 323-2333",
"address": {
"street": "14 Mountain Way",
"city": "Vail",
"state": "CO",
"zip": "81657"
}
}
]
View
@@ -3,6 +3,7 @@
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.view1',
'myApp.view2',
'myApp.version'
View
@@ -5,3 +5,21 @@ p {
body {
padding: 10px;
}
table {
margin-top: 10px;
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
border-bottom: 2px solid #ddd;
padding: 8px;
}
td {
border-top: 1px solid #ddd;
padding: 8px;
}
View
@@ -18,6 +18,7 @@
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
<li><a ui-sref="search">search</a></li>
</ul>
<!--[if lt IE 7]>
@@ -31,9 +32,13 @@
<!-- build:js js/seed.min.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="search/search.state.js"></script>
<script src="search/search.controller.js"></script>
<script src="search/search.service.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
@@ -0,0 +1,19 @@
(function () {
'use strict';
angular
.module('myApp')
.controller('SearchController', SearchController);
SearchController.$inject = ['SearchService'];
function SearchController(SearchService) {
var vm = this;
vm.search = function () {
SearchService.search(vm.term, function (response) {
vm.searchResults = response;
});
};
}
})();
View
@@ -0,0 +1,23 @@
<form ng-submit="vm.search()">
<input type="search" name="search" ng-model="vm.term">
<button>Search</button>
</form>
<table ng-show="vm.searchResults.length">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in vm.searchResults">
<td>{{person.name}}</td>
<td>{{person.phone}}</td>
<td>{{person.address.street}}<br/>
{{person.address.city}}, {{person.address.state}} {{person.address.zip}}
</td>
</tr>
</tbody>
</table>
@@ -0,0 +1,24 @@
(function () {
'use strict';
angular
.module('myApp')
.factory('SearchService', SearchService);
SearchService.$inject = ['$resource'];
function SearchService($resource) {
var Search = $resource('/api/search/people.json');
Search.search = function (term, callback) {
Search.query(function (response) {
var results = response.filter(function (item) {
return JSON.stringify(item).toLowerCase().includes(term.toLowerCase());
});
return callback(results);
});
};
return Search;
}
})();
View
@@ -0,0 +1,18 @@
(function () {
'use strict';
angular.module('myApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider
.state('search', {
url: '/search',
templateUrl: 'search/search.html',
controller: 'SearchController',
controllerAs: 'vm'
});
}
})();
View
@@ -8,6 +8,7 @@
"dependencies": {
"angular": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-resource": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-ui-router": "^0.3.1"

0 comments on commit 652ee29

Please sign in to comment.