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得到不完整的輸入值

回答

相關問題