停止AngularJS即时搜索

时间:2014-08-19 10:52:43

标签: javascript angularjs

我在AngularJS应用程序中构建了一个简单的搜索表单,当您键入时使用内置的过滤魔术角度来过滤手机列表。我已经在表单中包装了我的表单,因为用户提交表单时它也会执行过滤器,但会创建一个查询字符串,以便您可以离开列表并返回等。

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';
        }]);

我想要做的是禁用即时搜索,因此用户只能提交表单,而不会仅仅在keyup上获得结果。我该怎么做?

1 个答案:

答案 0 :(得分:1)

对输入的ng-model(ng-model="$parent.query")和过滤器的参数(| filter:filterQuery)使用2个不同的变量。这将使输入和过滤器彼此无关。然后,在提交表单时(在queryChanged中),使用ng-model($scope.filterQuery = $scope.query)的值更新filter参数。