2016-05-03 9 views
0

私の角プロジェクトでオートコンプリート入力テキストボックス機能を使いたい。テキストボックスをクリックしたときにオートコンプリートリストを開く

したがって、入力テキストボックスにタイプアヘッドディレクティブを使用しようとしています。

ここでモジュール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です:

<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> 

ここでは、ビューにどのように見えるか:

(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テンプレートです

enter image description here

私は入力テキストボックスに焦点を合わせ、その中で印刷を開始すると、オートコンプリートリストのポップアップが表示されます。

しかし、入力テキストボックスをクリック(フォーカス)すると、自動補完リストポップアップが必要です。

私はui-bootstrapバージョンVersion:0.14.2とangularjsバージョン1.4.7を使用しています。

テキストボックスにフォーカスがあるときに、ポップアップ自動補完リストを作成することはできますか?

答えて

1

typeahead-min-length = "0"を使用してください。このPRは、そのような動作を可能にするはずです。

EDIT この機能は、1.1.0のリリースで利用可能です。

+0

しかし、ui-bootstrapの最後のバージョンは0.14.3ですか? – Michael

関連する問題