Question

只是想知道为什么ngblur指令没有得到文本输入的完整值。我正在使用easyautocomplete插件来搜索JSON文件。

当它发现它会列出几个可以与输入匹配的建议时。问题是当我们不输入全文并选择从提供的列表中选择时，ngblur将仅捕获我们输入到输入框的内容而不是我们从列表中选择的内容。

json国家/地区为Indonesia或Singapore或Thailand

更新

我想要做的是当我从列表中选择或当我将文本输入留下全文时，应用程序将查找一些细节，例如。在输入国家后，应用程序将查找其资金。

Answer 1

您可以尝试的选项是使用$ scope。$ watch表示模型。不要在ngblur中调用该函数，而是尝试在脚本中添加以下代码段。

 $scope.$watch("data.country", function(event) {
      $scope.data.result = $scope.data.country;
    });

请找到修改后的fiddle。

Answer 2

发生此问题是因为在'data.country'中更新值之前模糊事件正在触发，您可以使用下面的代码解决此问题。创建如下的指令 -

 angular.module('app', []).directive('easyAutoComplete', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
          var options = {
  url: "https://api.myjson.com/bins/1rjn5",
  getValue: "country",
  listLocation: "data",
  list: {
    match: {
      enabled: true
    },
     onChooseEvent: function() {
      scope.$apply(function() {
                             ngModelCtrl.$setViewValue($(elm).getSelectedItemData().country);
                });    

     }
  },

};
      $(elm).easyAutocomplete(options);
        }
    };
});

然后像使用 -

一样使用它

 <input type="text" ng-model="data.country" easy-auto-complete ng-change="FindMaterialDetail(data.country)" id="Autocomplete">

Answer 3

这是您正在寻找的解决方案。

Updated JSFiddle

不要在FindMaterialDetail上调用blur方法，而是将其称为onHideListEvent自动完成选项。

angular.module('myapp', [])
    .controller('MyCtrl', function($scope) {
            $scope.data = {};
            $scope.FindMaterialDetail = function(country) {
                   var scope = angular.element($("#outer")).scope();
                   scope.$apply(function(){
                   scope.data.result = country;
          })

        }

        var options = {
                      url: "https://api.myjson.com/bins/1rjn5",
                      getValue: "country",
                      listLocation: "data",
                      list: {
                        match: {
                          enabled: true
                        },
                        onHideListEvent: function() {    
                              $scope.FindMaterialDetail($("#Autocomplete").val());
                          }
                      }
            };
            $("#Autocomplete").easyAutocomplete(options);
    });

Answer 4

在角度代码中加载jquery autocomplete插件时出现问题，因为角度代码首先被初始化，然后是自动完成。所以我已经将上面的代码转换为Angular Bootstrap Typehead，这正是以角度方式编写的自动完成。它还建议使用angular指令而不是jquery插件来构建角度应用程序

检查此链接上的结果的自定义模板。

Angular Autocomplete TypeAhead

以下是Fiddle

<input type="text" ng-model="data.country" placeholder="Custom template"  uib-typeahead="country as country  for country in Countries"  typeahead-show-hint="true" typeahead-min-length="0" ng-blur="FindMaterialDetail(data.country)"   class="form-control">

AngularJS Ngblur获得不完整的输入值

4 个答案: