Permalink
Browse files

Add search feature

1 parent 07bf004 commit 652ee29d9a002f5d437d356481809fe74114fe7e @mraible mraible committed Oct 17, 2016
@@ -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;
+ });
+ };
+ }
+})();
@@ -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;
+ }
+})();
@@ -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.