web-dev-qa-db-ja.com

オブジェクトおよび選択機能を備えたAngularJS BootstrapUI Typeahead

私はAngular 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>

何か案は？

angularjstypeaheadangular-ui-bootstrap
31
stampeder

http://angular-ui.github.io/bootstrap/ のtypeaheadディレクティブは非常に柔軟であり、目的の機能を実現する方法は数多くあります。ここに2つ紹介します。

まず、typeaheadディレクティブは、AngularJS select ディレクティブに非常によく似た構文を使用します。これにより、表示されたラベルとモデル値としてバインドされたデータを完全に制御できます。そのため、アドレスをラベルとして表示し、郵便番号を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は、一致するポップアップではなく、入力フィールドをクリックしたときに反応するため、あまり役に立ちません。これに加えて、キーボードを使用して行われた選択には反応しません。

100
pkozlowski.opensource

@ pkozlowski-opensourceの優れたソリューションには1つの欠点があります。少なくとも、コードではなくアイテムの説明を表示する場合は、この方法でng-modelプロパティからtypeaheadを初期化できません。

次のように先行入力を構成することで、これを解決する方法を見つけました。

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

これは、適切なオブジェクトに値を設定することで初期化できる状態オブジェクトをモデルプロパティに返します。

    $scope.selected = {postcode:'M1',address:'Manchester'};

ここで作業フィドル： https://jsfiddle.net/0y3ntj4x/3/

このシナリオは、先行入力の角度ブートストラップのドキュメントから欠落していると思います。

4
Paul Taylor

@ pkozlowski.opensourceが提供する回答に追加したいだけです。jsfiddle.net/ jLupaに表示される動作は、AngularのUI-Bootstrapのバージョン0.10.0では動作しなくなりました。こちらをご覧ください：jsfiddle.net/jLupa/87/私が行った唯一の変更は、バージョン0.10.0への更新であり、両方の入力ボックスが郵便番号に解決されることがわかります。

2
Brian Graham

同様の問題があります

<input type="text" ng-model="select" typeahead="a as a.Value for a in countries | filter:{{ Value:$viewValue }} "class="form-control" typeahead-editable="false" >

{ Code: AL,ParentCode: null,Value: Albania,Id: 1206,Name: countries }

しかし、この方法でサービスを使用すると機能しませんでした

$scope.countries = []; _services.getcountries(function(result) { $scope.countries = result; });

そして解決されました

$scope.countries = []; _services.getcountries(function(result) { $.each(result, function(i, o) { $scope.countries.Push(o); }); });

私は誰かを助けることを願っています

2
Math

これは、Twitterのtypeaheadを使用している、angularjsディレクティブの値の別のリストです： https://github.com/mihaigiurgeanu/lov-typeahead 。ブートストラップとともに使用できますが、ブートストラップなしでも使用できます。

Bowerを使用している場合は、次のようにしてインストールできます。

bower install lov-typeahead --save
0
Mihai Giurgeanu
try the following before saving / validating

modelCtrl。$ setValidity（ 'editable'、true）;

0
Mohamed.Abdo