我需要让 http 获得每个文本输入，特别是 AngularJS

Question

我想在每个文本字段上执行 http Get，特别是在我的 HTML ..

当用户在实际聚焦的文本字段中输入内容时，我需要发送 http GET ..并且在后端实时搜索数据库以获取结果（我已经获得了使用 req.body 在 [= 中搜索查询文本的功能） 24=])...如果搜索文本与 DB 匹配，它应该在文本字段上显示来自 DB 的图像..如果我只为一个文本字段制作它应该工作......但不知道如何在某个周期或什么..没有为每个额外的单个文本字段制作 GET 方法..将来我想在用户按下 space 时动态增加文本字段计数并创建新的空输入字段.. 我的 HTML 应该看起来像 beginin 一样：

  <div class="container">

        <br>
    <div class="row">
    <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data}}"  width="100%"/>
        <br>
        <h1 style="color:#258cd1;"><input type="text" ng-   model="userInput.search"  class="text-center" style="border-width: 0px ;width:100%" > </h1>
      </div>
       <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data2}}"  width="100%"/>
    <br>
        <h1 style="color:#258cd1;">  <input type="text" ng-model="userInput.search2" class="text-center" style="border-width: 0px ;width:99%"></h1>
</div>
    <div class="col-sm-2 col-lg-2 col-xs-2">
    <img data-ng-src="data:image/png;base64,{{data3}}"  width="100%"/>
    <br>
        <h1 style="color:#d62c1a;"> <input type="text" ng-model="userInput.search3"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
        <div class="col-sm-2 col-lg-2 col-xs-2">
        <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
        <br>
            <h1 style="color:#258cd1;"> <input type="text" ng-model="userInput.search4"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
            <div class="col-sm-2 col-lg-2 col-xs-2">
           <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
            <br>
            <h1 style="color:#d62c1a;"> <input type="text" ng-model="userInput.search9"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
        <div class="col-sm-2 col-lg-2 col-xs-2">
            <img data-ng-src="data:image/png;base64,{{data4}}"  width="100%"/>
            <br>
            <h1 style="color:#258cd1;"> <input type="text" ng-model="userInput.search5"  class="text-center" style="border-width: 0px ;width:99%"></h1>
        </div>
     </div>

在控制器中我有这样的东西..但它只适用于一个领域..

 $scope.$watch('userInput.search', function () {

            $http({
                url: '/imgskuska',
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                data: $scope.userInput
            }).success(function (response) {


                $scope.data = response;
            })

        })

我需要做的是调用 GET 方法（post 我认为这不是个好主意）在控制器中使用 $scope.$watch 仅在实际聚焦的文本字段上..并且用户正在输入那东西..当用户使用tabKey专注于另一个文本字段时从另一个输入进行调用.. 我需要一些建议如何去做....非常感谢..

Answer 1

我会避免在这种情况下使用 $watch，而是使用 ngChange。你可以那样做：

<input type="text" ng-model="field1" ng-change="search($event,field1)" />

与：

$scope.search = function(event,fieldValue) {
  // access to the input field : event.target
  // do the HTTP call with fieldValue
}

更好的解决方案是创建一个 angular directive 来拥有一个可重用的组件：

<my-input-with-autosearch ng-model="field1" />

我需要让 http 获得每个文本输入，特别是 AngularJS

What I need to make http get on every textinput particularly AngularJS

http-get

angularjs