[解決済み] オブジェクトと選択機能を備えたAngularJS BootstrapUI Typeahead

質問

Angularでtypeaheadを実装しようとしています。 http://angular-ui.github.io/bootstrap/ typeaheadフィールドは完全な住所を表示しますが、クリックされると別のフィールドにその住所の郵便番号だけが入力されます。このためにng-changeまたはng-clickを使おうとしていますが、うまくいきません。

http://jsfiddle.net/UxTBB/2/

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.states = [{postcode:'B1',address:'Bull ring'},{postcode:'M1',address:'Manchester'}];
    $scope.setPcode = function(site) {
        $scope.selPcode = site.postcode;
        };
});

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                postcode <input type="text" ng-model="selPcode" />
                typeahead <input type="text"  ng-change="setPcode(site)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

何かアイデアはありますか？

解決方法は？

からのtypeaheadディレクティブは http://angular-ui.github.io/bootstrap/ は非常に、非常に柔軟で、望ましい機能を実現する方法はたくさんあります。ここでは、そのうちの2つを紹介します。

まず、typeaheadディレクティブは、AngularJSの セレクト ディレクティブを使用します。これにより、表示されるラベルと、モデル値としてバインドされるデータを完全に制御することができます。つまり、単純に住所をラベルとして表示し、郵便番号を selPcode を直接指定します。

<input type="text" ng-model="selPcode" typeahead="state.postcode as state.address for state in states | filter:$viewValue" typeahead-editable="false" />

ここで重要なのは as の部分は typeahead の式で表されます。 typeahead="state.postcode as state.address for state in states

また、私が使っているのは typeahead-editable="false" 属性を使って、選択されたときだけモデルをバインドします。動作するjsFiddleはこちら。 http://jsfiddle.net/jLupa/

コールバック関数を本当に使う必要がある場合のもうひとつの解決策は typeahead-on-select 属性で指定します。

<input type="text"  typeahead-on-select="setPcode($item)" ng-model="selected" typeahead="state.address for state in states | filter:$viewValue" />

マッチしたものが選択されたときのコールバックを指定することができます。ここで動くフィドル http://jsfiddle.net/t8BV2/

最後のノートとして。 ng-change は、入力が変化したときに反応するため、ここでは動作しません。 ng-click は入力フィールドのクリックに反応し、マッチポップアップには反応しないので、これもあまり意味がありません。その上、キーボードで選択されたものには反応しません。