停止AngularJS即时搜索 [英] Stop AngularJS Instant Search

问题描述

我建立了一个简单的搜索表单在我的AngularJS应用程序，这在您键入使用内置的角过滤魔术过滤手机列表。我矿包裹的形式，当用户提交它也做了过滤器的形式，而是创建一个查询字符串，这样你就可以从浏览列表中离开并返回等。

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

我想要做的就是禁用即时搜索，让用户只提交表单和独绝沾到KEYUP的结果。我该怎么做呢？

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?

推荐答案

使用2为输入（的NG-模型不同的变量 NG-模式=$ parent.query）和过滤器（的参数 |过滤器：filterQuery ）。这将使得在输入和滤波器彼此无关。然后，当表单提交（以 queryChanged ），用NG-模式的价值更新滤波器参数（ $ scope.filterQuery = $范围.query ）。

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).

这篇关于停止AngularJS即时搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！