Support to add search parameters and change search parameter's values via ng-model, fixed issue #7

* remove $watch on internal state variables and use ng-change instead
* buffer changes and throttle changes to ng-model
* detect changes to ng-model from the outside and add new search parameters or change their value

Author: dnauck

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 2.0.0 - unreleased
+* Support to add search parameters and change search parameter's values via ng-model, fixed issue #7
+
 ### 1.1.1 - 03 February 2015
 * update README with latest changes to dist files in bower package
 * remove leading 'src/' path from template name

src/angular-advanced-searchbox.html

@@ -18,6 +18,7 @@
                        ng-keydown="keydown($event, $index)"
                        ng-blur="leaveEditMode($index)"
                        ng-show="searchParam.editMode"
+                       ng-change="searchParamValueChanged(searchParam)"
                        ng-model="searchParam.value"
                        placeholder="{{searchParam.placeholder}}" />
             </div>
@@ -32,6 +33,7 @@
                ng-blur="focus = false"
                typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
                typeahead="parameter as parameter.name for parameter in parameters | filter:{name:$viewValue} | limitTo:8"
+               ng-change="searchQueryChanged(searchQuery)"
                ng-model="searchQuery" />
     </div>
     <div class="search-parameter-suggestions" ng-show="parameters && focus">

src/angular-advanced-searchbox.js

@@ -28,15 +28,39 @@ angular.module('angular-advanced-searchbox', [])
                     $scope.searchParams = [];
                     $scope.searchQuery = '';
                     $scope.setSearchFocus = false;
+                    var searchThrottleTimer;
+                    var changeBuffer = [];
 
-                    $scope.$watch('searchQuery', function () {
-                        updateModel();
-                    });
+                    $scope.$watch('model', function (newValue, oldValue) {
+
+                        if(angular.equals(newValue, oldValue))
+                            return;
 
-                    $scope.$watch('searchParams', function () {
-                        updateModel();
+                        angular.forEach($scope.model, function (value, key) {
+                            if (key === 'query' && $scope.searchQuery !== value) {
+                                $scope.searchQuery = value;
+                            } else {
+                                var paramTemplate = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
+                                var searchParam = $filter('filter')($scope.searchParams, function (param) { return param.key === key; })[0];
+
+                                if (paramTemplate !== undefined) {
+                                    if(searchParam === undefined)
+                                        $scope.addSearchParam(paramTemplate, value, false);
+                                    else if (searchParam.value !== value )
+                                        searchParam.value = value;
+                                }
+                            }
+                        });
                     }, true);
 
+                    $scope.searchParamValueChanged = function (param) {
+                        updateModel('change', param.key, param.value);
+                    };
+
+                    $scope.searchQueryChanged = function (query) {
+                        updateModel('change', 'query', query);
+                    };
+
                     $scope.enterEditMode = function(index) {
                         if (index === undefined)
                             return;
@@ -60,6 +84,7 @@ angular.module('angular-advanced-searchbox', [])
                     $scope.typeaheadOnSelect = function (item, model, label) {
                         $scope.addSearchParam(item);
                         $scope.searchQuery = '';
+                        updateModel('delete', 'query');
                     };
 
                     $scope.addSearchParam = function (searchParam, value, enterEditModel) {
@@ -77,22 +102,29 @@ angular.module('angular-advanced-searchbox', [])
                         );
 
                         //TODO: hide used suggestion
+
+                        updateModel('add', searchParam.key, value);
                     };
 
                     $scope.removeSearchParam = function (index) {
                         if (index === undefined)
                             return;
 
+                        var searchParam = $scope.searchParams[index];
                         $scope.searchParams.splice(index, 1);
 
                         //TODO: show hidden/removed suggestion
+
+                        updateModel('delete', searchParam.key);
                     };
 
                     $scope.removeAll = function() {
                         $scope.searchParams.length = 0;
                         $scope.searchQuery = '';
 
                         //TODO: show hidden/removed suggestion
+
+                        $scope.model = {};
                     };
 
                     $scope.editPrevious = function(currentIndex) {
@@ -172,21 +204,28 @@ angular.module('angular-advanced-searchbox', [])
                         restoreModel();
                     }
 
-                    var searchThrottleTimer;
-                    function updateModel() {
+                    function updateModel(command, key, value) {
                         if (searchThrottleTimer)
                             $timeout.cancel(searchThrottleTimer);
 
-                        searchThrottleTimer = $timeout(function () {
-                            $scope.model = {};
-
-                            if ($scope.searchQuery.length > 0)
-                                $scope.model.query = $scope.searchQuery;
+                        // remove all previous entries to the same search key that was not handled yet
+                        changeBuffer = $filter('filter')(changeBuffer, function (change) { return change.key !== key; });
+                        // add new change to list
+                        changeBuffer.push({
+                            command: command,
+                            key: key,
+                            value: value
+                        });
 
-                            angular.forEach($scope.searchParams, function (param) {
-                                if (param.value !== undefined && param.value.length > 0)
-                                    $scope.model[param.key] = param.value;
+                        searchThrottleTimer = $timeout(function () {
+                            angular.forEach(changeBuffer, function (change) {
+                                if(change.command === 'delete')
+                                    delete $scope.model[change.key];
+                                else
+                                    $scope.model[change.key] = change.value;
                             });
+
+                            changeBuffer.length = 0;
                         }, 500);
                     }
 
@@ -274,4 +313,4 @@ angular.module('angular-advanced-searchbox', [])
             };
         }
     ]);
-})();
+})();