Question

在我的angularjs应用程序http://1ffa3ba638.url-de-test.ws/zombieReport/popup.html#/lord中，我尝试进行实时即时搜索：我希望在开始时没有任何显示，并且当最少两个字母被写入时搜索开始。并且在再次针对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：

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

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

Answer 1

您正在关注表单有效性的更改。您将minlength设置为2，因此只要输入两个字符，表单就会生效，从而触发您的请求。一旦你从2个字符退格到1个字符，就会再次发生有效性的变化，从而触发另一个请求。而不是观察表单的有效性，请注意表单中的更改。

使用angularjs进行实时搜索

1 个答案: