AngularJS Ngblur得到不完整的输入值

想知道为什么ngblur指令没有得到文本输入的完整值。我正在使用easyautocomplete插件来通过JSON文件进行搜索。AngularJS Ngblur得到不完整的输入值

当它发现它会列出一些可能与输入相匹配的建议。问题是，当我们没有输入完整文本并选择从提供的列表中选择时，ngblur将仅捕获我们输入到输入框的内容，而不是我们从列表中选择的内容。

这里是小提琴https://jsfiddle.net/zvezrg6j/

JSON国家Indonesia或Singapore或Thailand

UPDATE

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

来源

2016-03-07 Joseph Goh

你必须定义'data'：'$ scope.data = {};' –

不解决问题，还是一样。更新小提琴https://jsfiddle.net/zvezrg6j/2/ –

它只会显示输入值的类型，因为当您从列表中选择选项时，输入字段失去了焦点与最后一个类型的值。在此操作之后，ngblur事件不会被触发。 – rraman

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

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

来源

2016-03-07 10:07:25

有没有一种方法可以将自动完成并直接注入到文档主体而不是写入角度模块中，我我试图有一个干净的角度模块，只包括任何有关的角度， –

更新我的小提琴，请看看最新的小提琴。 –

不错，这就是我要找的。谢谢 –

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

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

请找到修改后的fiddle。

来源

2016-03-07 09:12:53 rraman

你的代码是伟大的，但是我需要查找任何选择的国家的一些细节，如果我没有错误使用$ watch将保持每一个变化，并做我不想要的API的查询，我只是想执行查询当函数调用时。纠正我，如果我错了 –

你的理解是正确的。当模型发生变化时，$ watch将被触发。请更新您的问题，详细说明您正在努力实现的目标以及您希望解决方案的方式。 – rraman

我已更新我的问题 –

发生此问题是因为模糊事件在'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">

来源

2016-03-07 09:17:10

把你的代码添加了小提琴，但它并没有解决问题。请看看https://jsfiddle.net/zvezrg6j/3/ –

谢谢你的代码，在这里学习一些新东西，但我有一个问题，如果我有另一个JSON文件，可以说我有一个城市列表JSON文件，是否意味着我必须再次创建另一个指令？可以重复使用的代码？ –

不，您需要通过创建指令的隔离范围并传递可更改的字段/值来使其可重用 –

在角码中加载jquery自动完成插件时出现问题，因为角码首先被初始化，然后是自动完成。所以我已经将上面的代码转换为Angular Bootstrap Typehead，它的角度方式完全是自动完成的。它还推荐使用角度指令而不是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">

来源

2016-03-07 10:14:24 Vigneshwarr

感谢您提供的信息，至于角度引导，有一个问题，因为我使用semantic-ui作为前端平台，它将互相冲突。 –

AngularJS Ngblur得到不完整的输入值

回答

相关问题