Javascript 使用angularjs进行实时搜索

在我的angularjs应用程序中，我尝试进行实时搜索：我不希望在开始时显示任何内容，并且在写下最少两个字母时开始搜索。并且在对3个或更多字母再次执行搜索之后，对每个新字母进行新的查询

/* INIT .myForm */
$scope.myForm_lord = {};
$scope.posts = {};

/* AJAX POST QUERY : calling lord watching */
$scope.$watch('myFormZR_lord.$valid', function() {

        // ng-show things
        $scope.successLordZR = true;

        // RETRIEVE DATAS
        var dataName = $scope.myForm_lord.search;

        // CONSOLE LOG CONTROL
        console.log(defineCLC + "LORD search requested by name : " + dataName);

        // $resource
        var Post = $resource(
            urlLordRest, 
            {name: dataName}, 
            {'query': {method: 'GET', isArray: true, cache: false, headers: {'Accept': 'application/json'}}}
        );
        $scope.posts = Post.query();
        console.log($scope.posts);

});

html:

{{‘TRS_CTRL3_FORM2’| translate}
{{'TRS_CTRL3_TEXT1'| translate}}：



{{post.prefixe}}{{post.name}}

---

问题是结果实际上是在开始时显示的，并且只有两个字母的查询，而不是如果我们输入3个或更多。查询执行了两次（参见控制台日志），怎么了？我使用$watch，这不好吗？

您正在关注表单有效性的变化。您将minlength输入为2，这样一旦您输入两个字符，表单就变得有效，从而触发您的请求。一旦从2个字符退格到1个字符，有效性就会再次发生变化，从而触发另一个请求。与其关注表格的有效性，不如关注表格中的变化

        <form name="myFormZR_lord" id="myFormZR_lord" class="form-horizontal" role="form" novalidate="">
            <div class="form-inline form-inline-sm">

                <!-- form search -->
                <div class="input-group">
                    <input class="form-control" name="search" type="text" ng-required="true" minlength="2" ng-minlength="2" ng-model="myForm_lord.search" placeholder="{{ 'TRS_CTRL3_FORM1' | translate }}" autocomplete="off" />
                </div>

            </div>
            <span class="myForm_error" ng-show="myFormZR_lord.$invalid">{{ 'TRS_CTRL3_FORM2' | translate }}</span>
        </form>

        <div ng-show="successLordZR">
            <p>{{ 'TRS_CTRL3_TEXT1' | translate }} :</p>
            <ul>
                <li ng-repeat="post in posts">                    
                    <p>{{post.prefixe}} {{post.name}}</p>                                        
                </li>
            </ul>
        </div>