angularjs - オブジェクトと選択機能を備えた AngularJS BootstrapUI Typeahead

Question

http://angular-ui.github.io/bootstrap/を使用して Angular で先行入力を実装しようとしています。先行入力フィールドには完全な住所が表示されますが、クリックすると別のフィールドにその住所の郵便番号だけが入力されます。これには 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>

何か案は？

Answer 1

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

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

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

このシナリオは、typehead の angular-bootstrap ドキュメントに欠けていると思います。

Answer 2

私は同様の問題を抱えています、

<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); }); });

誰かを助けてほしい

Answer 3

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

Answer 4

try the following before saving / validating 

modelCtrl.$setValidity('編集可能', true);