SR Office

ブログ
2013年5月30日

AngularJS UI でtypeahead,ng-changeだと動かない




AngularJSでBootstrapを使う場合、UI Bootstrapを使うと便利だ。もともと、AngularUIと呼ばれていたが、AngularUIが幾つかのサブプロジェクトに別れ、Bootstrap関連はUI Bootstrapとなったようだ。


Bootstrapにはtypeaheadの機能があり、テキストボックスに文字を入力すると、これだろうと候補を上げてくれる、イケてる入力補助だ。今回これを使ってみた。


  1. 営業担当の人をテキストボックスへ直接入力した時、typeaheadの機能で候補を選択させる。
  2. typeaheadから入力したい候補を選択する。
  3. 選択した候補のIDをID欄に表示する。

こんな機能を実現したい。
テキストボックスにはtypeahead、変更された事を検知して、営業担当からIDを選択、設定する。


UI Bootstrapではtypeaheadという属性が定義されているのでこれを使う。
変更された後の処理ではAngularJSのng-change属性を使う。

てっきり上記2点で大丈夫だと思っていたのだが、ハマってしまった。
ng-change属性が邪魔してtypeaheadが動かない。いろいろ調査した結果typeahead-editable=”false”なる属性設定すると動いた。

 
<input class="inputSellName" type="text" name="inputSellNameForm" placeholder="営業" autocomplete="off" ng-model="project.sell.name" ng-change="changeId()" required typeahead="sell.name for sell in sells | filter:$viewValue " typeahead-editable="false">

こんな長い属性設定になってしまった。でもこの設定書いてる順番で動きが変わる。いいのだろうか。