只有當明確選擇行時，才能使用UI-bootstrap typehead頭

我已創建此jsBin以演示我遇到的問題。如果你到這裏，嘗試輸入「Five」然後繼續。你的自然反應是鍵入「Five」，然後按Tab鍵，如果你想要「Five-Hundred」，你可以向下箭頭鍵;然而，在這種情況下，您必須鍵入「Five」，然後按下轉義鍵或物理鼠標，而不點擊任何其他選項只有當明確選擇行時，才能使用UI-bootstrap typehead頭

因此，基本上，當您使用鍵入功能時，如果有至少有一個匹配結果符合你當前的標準，按下標籤會選中它。我預期的行爲是，當你輸入時，當前選擇的選項就是你正在輸入的內容，如果你想要其他結果之一，你必須向下箭頭一次或多次。

下面是是在jsBin代碼：我最終修改ui-bootstrap工作，我怎麼想它

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

.controller('TestController', function($scope) { 
    $scope.typeaheadOptions = [ 
    'One','Two','Three','Four','Five-Hundred','Fifteen','Fourteen','Fifty','Six','Seven','Eight','Nine','Ten' 
    ] 
});

來源

2014-05-16 Tom

：

<div ng-controller="TestController"> 
    <div> 
    {{selected}} 
    </div> 
    <input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue"> 
</div>

和JavaScript。

我加了mustMouseDownToMatch屬性/屬性的指令，如：

<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-mouse-down-to-match="true">

和JavaScript：

var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ? originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;

我也添加了這個功能，這將對目前的文本中的第一項並將其作爲選定項目：

var setFirstResultToViewValue = function (inputValue) { 
    scope.matches.splice(0, 0, { 
     id: 0, 
     label: inputValue, 
     model: inputValue 
    }); 

    // set the selected item to the first item in the list, which is this guy 
    scope.activeIdx = 0; 
}

d在0123a呼叫中被稱爲前向指令：

var getMatchesAsync = function(inputValue) { 
// do stuff 
    $q.when(parserResult.source(originalScope, locals)).then(function(matches) { 
     // do stuff 
     if (matches.length > 0) { 
      // do stuff 
     } 
     if (mustMouseDownToMatch) { 
      setFirstResultToViewValue(inputValue); 
     } 
     // do stuff 
    };

來源

2014-05-16 18:34:22 Tom

只有當明確選擇行時，才能使用UI-bootstrap typehead頭

回答

相關問題