Added QueryStringService and filter-field directive to replace the qu…

…ery string logic in the controller
kdechant · Aug 4, 2015 · 46a0dbd · 46a0dbd
1 parent 493a61e
commit 46a0dbd
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/mainCtrl.js"></script>
         <script src="scripts/services/bookService.js"></script>
+        <script src="scripts/services/QueryStringService.js"></script>
+        <script src="scripts/directives/filter-field.js"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     </head>
     <body ng-app="ngdemoApp">

diff --git a/scripts/controllers/mainCtrl.js b/scripts/controllers/mainCtrl.js
@@ -1,29 +1,13 @@
 'use strict';
 angular.module('ngdemoApp')
-    .controller('MainCtrl', function ($scope, $location, BookService) {
+    .controller('MainCtrl', function ($scope, $location, QueryStringService, BookService) {
 
         // a simple filter object, with default filter values
-        $scope.filters = { author: '', title: '' };
+        var default_filters = { author: '', title: '' };
 
-        // read filters from the query string, and use them to
-        // replace the default filters
-        var qs = $location.search();
-        for (var fld in $scope.filters) {
-            if (fld in qs) {
-                $scope.filters[fld] = qs[fld];
-            }
-        }
-
-        $scope.update = function(fld) {
-            // update the query string with the new filters
-            if ($scope.filters[fld] != '') {
-                $location.search(fld, $scope.filters[fld]);
-            } else {
-                // remove empty filters
-                $location.search(fld, null);
-            }
-        }
-
+        // read filters from the query string
+        $scope.filters = QueryStringService.getFilters(default_filters);
+
         BookService.all($scope.filters).then(function(data) {
             $scope.books = data;
         });

diff --git a/scripts/directives/filter-field.js b/scripts/directives/filter-field.js
@@ -0,0 +1,22 @@
+'use strict';
+app.directive('filterField', function () {
+    return {
+        restrict: 'E',
+        scope: {
+            filters: '=',
+            field: '@'
+        },
+        template: '<input type="search" class="form-control" placeholder="filter" ng-model="filters[field]" ng-model-options="{ debounce: 250 }" ng-change="doFilter()">',
+        controller: function ($scope, $location) {
+            $scope.doFilter = function () {
+                // update the query string
+                if ($scope.filters[$scope.field] != '') {
+                    $location.search($scope.field, $scope.filters[$scope.field]);
+                } else {
+                    // remove from query string if empty
+                    $location.search($scope.field, null);
+                }
+            }
+        }
+    };
+});
diff --git a/scripts/services/QueryStringService.js b/scripts/services/QueryStringService.js
@@ -0,0 +1,16 @@
+'use strict';
+
+// This service reads data from the query string into a filter object.
+app.service('QueryStringService', function ($location) {
+
+    this.getFilters = function(filterObj) {
+        var qs = $location.search();
+        for (var param in filterObj) {
+            if (param in qs) {
+                filterObj[param] = qs[param];
+            }
+        }
+        return filterObj;
+    };
+
+});
diff --git a/views/main.html b/views/main.html
@@ -5,8 +5,8 @@ <h1>Angular Query String Demo</h1>
         <th>Title</th>
     </tr>
     <tr>
-        <td><input type="text" ng-model="filters.author" ng-model-options="{ debounce: 250 }" ng-change="update('author')"></td>
-        <td><input type="text" ng-model="filters.title" ng-model-options="{ debounce: 250 }" ng-change="update('title')"></td>
+        <td><filter-field filters="filters" field="author"></filter-field></td>
+        <td><filter-field filters="filters" field="title"></filter-field></td>
     </tr>
     <tr ng-repeat="book in books">
         <td>{{ book.author }}</td>