停止AngularJS即时搜索

Question

I have built a simple search form in my AngularJS app, that as you type uses the built in filter magic of angular to filter a list of phones. I've wrapped mine in a form as when the user submits the form it ALSO does the filter, but creates a query string so you can navigate away from the list and return etc.

HTML:

<form class="form-search" ng-submit="$parent.queryChanged()">
        <div class="control-group">
                <label class="control-label" for="filter">Filter:</label>
                <div class="controls">
                        <input name="q" ng-model="$parent.query" id="filter" type="text">
                </div>
        </div>
</form>

JS:

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', '$location',
        function($scope, Phone, $location) {
                $scope.query = $location.search()['q'];
                $scope.queryChanged = function () {
                        $location.search('q', $scope.query)
                }
                $scope.phones = Phone.query();
                $scope.orderProp = 'age';
        }]);

What I want to do is disable the instant search, so the user ONLY submits the form and never gets the results on keyup alone. How do I do this?

Answer 1

Use 2 different variables for the ng-model of the input ( ng-model="$parent.query" ) and the parameter of the filter ( | filter:filterQuery ). This will make the input and the filter unrelated to each other. Then when the form is submitted (in queryChanged ), update the filter parameter with the value of the ng-model ( $scope.filterQuery = $scope.query ).