Angular.JS中的Async typeahead不顯示選項

我查看了關於Async typeahead的官方article and sample。當我簡化並將它存根並用於我的項目。Angular.JS中的Async typeahead不顯示選項

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', 

function($scope, $http) { 

    $scope.placeHolder = "Choose"; 
    $scope.displayPath = "Name"; 
    $scope.typeaheadminlen = 3; 
    // Any function returning a promise object can be used to load values asynchronously 
    $scope.loadOptions = function(val) { 
    var stub = [{ Name: "fuuuu" }, { Name: "baaar" }]; 
    if (!$scope.selected) 
     return []; 
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', { 
     params: { 
     address: "aa", 
     sensor: false 
     } 
    }) 
    .then(function(response){ 
     return stub; 
    }); 
    }; 
});

http://plnkr.co/edit/o4ly4vYJdGCwHk62tN2j?p=preview

此代碼的工作就plunker不夠好，但不是在我的項目。不知何故，它只有幾次。其他時候我只看到glyphicon-refresh，但選項還沒有出現。斷點說我正確地得到了我的return stub;。版本號Angular.JS和Bootstrap與我的項目版本匹配。任何想法我可能會錯過什麼？

P.S. div-tag的範圍和內容在項目和搶劫者之間完美複製。

來源

2015-05-29 kir

這一切都是關於hasFocus變量ui-bootstrap-tpls.js和'模糊'事件。由於某種原因，每當出現自動完成選項時都會發生此事件。 ui-bootstrap-tpls.js設置爲hasFocus變量爲false，並在getMatchesAsync函數中導致問題，因爲此函數具有以下條件：if (onCurrentRequest && hasFocus)。所以自動完成選項不會出現。我沒有找到'模糊'事件的原因，所以我只是從條件中刪除hasFocus。我知道，這是不好的解決方案，但它是我能做到的最好的。

來源

2015-06-02 13:41:21 kir

請爲它找到工作的解決方案：

HTML部分：

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> 
    <script src="script.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
</head> 
<body ng-controller="MainCtrl"> 
    <pre>{{selected.name}}</pre> 
    <input autocomplete="off" 
     ng-model="selected" 
     placeholder="Item Name" 
     type="text" 
     typeahead="item as item.name for item in data | filter:$viewValue" /> 
</body> 
</html>

腳本部分：

var app = angular.module('plunker', ['ui.bootstrap']); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = [{id:1,name:"google"}, {id:2, name:"microsoft"},{id:3, name:"ibm"}, 
    {id:4, name:"cisco"},{id:5, name:"apple"} 
,{id:6, name:"nokia"},{id:7, name:"bing"},{id:8, name:"mango"} 
]; 
    $scope.selected = {id:1, name:"google"}; 
    $scope.selected2 = {}; 
});

工作Plunker鏈接：Plunker

來源

2015-06-02 13:54:58

的預輸入工作在一個輸入元素。當輸入鬆散焦點時，則ui-boostrap-tpls.js不會像@kir所說的那樣執行代碼的某些部分。

如果您有一個指令將焦點從自動完成輸入中刪除，或者如果您有一個微調組件在執行AJAX請求時顯示圖標，它可能會從自動完成輸入中消除焦點。

在我的具體情況中，我使用的角度塊的UI，並予固定的情況下，從阻擋除去封閉行爲：

// Tell the blockUI service to ignore certain requests 
blockUIConfig.requestFilter = function(config) { 
    // If the request starts with '/api/quote' ... 
    if(config.url.match(/^.*MyMethod.*/)) { 
    return false; // ... don't block it. 
    } 
};

來源

2015-06-05 18:46:07 Aquiles

Angular.JS中的Async typeahead不顯示選項

回答

相關問題