2016-05-03 48 views
0

我想在我的角度項目中使用自動完成輸入文本框功能。單擊文本框時打開自動完成列表

所以我嘗試在我的輸入文本框中使用typeahead指令。

這裏模塊defenition:

(function() { 
    "use strict"; 
    angular.module("damageEvent", ["ui.router", 
     "geomindCommon", 
     "lookups", 
     "ngAnimate", 
     "ui.bootstrap"]) 

     .config([ 
      "$stateProvider", 
      function ($stateProvider) { 

       $stateProvider 
        .state("sitesDamages", { 
         abstract: true, 
         url: "/sitesDamages", 
         template: "<ui-view></ui-view>" 

        }) 
        .state("sitesDamages.sitesList", { 
         url: "/", 
         templateUrl: "app/damageEvent/templates/sitesDamageEvents.tmpl.html", 
         controller: "sitesDamageEventsController", 
         controllerAs: "list", 
        }) 
      } 
     ]); 
})(); 

這裏是控制器defenition:

(function() { 
    "use strict"; 

    angular.module('damageEvent').controller("sitesDamageEventsController", [ sitesDamageEventsController]); 


    function sitesDamageEventsController() { 
     var self = this; 

     self.selected = ''; 
     self.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 
         'California', 'Colorado', 'Connecticut', 'Delaware', 
         'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 
         'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
         'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
         'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 
         'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 
         'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
         'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 
         'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 

    } 
})(); 

這裏是HTML模板:

<div class="container"> 

     <input type="text" 
       typeahead-min-length="0" 
       ng-model="list.selected" 
       typeahead="state for state in list.states | filter:$viewValue:emptyOrMatch | limitTo:8" 
       class="form-control"> 

    </div> 

這看起來如何在視圖中:

enter image description here

當我關注輸入文本框並在其中啓動打印時,自動完成列表彈出。

但是我需要點擊輸入文本框(專注)時自動完成列表彈出。

我使用ui-bootstrap版本版本:0.14.2和angularjs版本1.4.7。

任何想法是否有可能使文本框專注時彈出自動完成列表?

回答

1

嘗試使用typeahead-min-length =「0」,這個PR應該允許這種行爲。

編輯 此功能是在1.1.0版本中提供。

+0

但是最後一個版本的ui-bootstrap是0.14.3不是嗎? – Michael