角度UIブートストラップ先読み、オブジェクトから文字列へのngモデルの変更

Question

UIブートストラップの先読みに問題があります。ここにplnkrがあり、説明は以下の通りです。

http://plnkr.co/edit/lvy1Xu13xfFBjHbIY68H?p=preview

私はその状態の名前を書き込むことによって、先行入力された文字で記載されている状態から1つの状態を選択できるようにしたいのですが、また同じ形式で新しい状態を作成できるように、プロパティ名とフラグ付き存在しません。

Typeaheadから状態を選択すると、すべてが正常に動作します。オブジェクト全体を選択すると、プロパティ「状態」と「フラグ」も選択されます。この問題は、Typeaheadにリストされているオプションのいずれとも一致しない文字列を書き込むときに発生します。状態を "myState"にしたいとしましょう。次に、type-headからオプションを1つ選択したときのようにng-modelが文字列ではなくオブジェクトではなく、文字列にプロパティを作成できないためフラグプロパティを入力できません。

nib-typeaheadの設定を変更したり、ng-modelを何とか変更したり、ng-modelを文字列からオブジェクトに変更するなどの方法はありますか？

<input type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control"> 

ここでは、私が達成しようとしていることを簡単に説明します。私は入力を開始し、状態が文字列で存在していない状態を入力すると

state = { 
    "name": "Arizona", 
    "flag": "9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png" 
} 

：私は、先行入力された文字から状態を選択すると、状態は次のようになります。

state = "myState"

ので、私は新しい「state.name」を追加し、状態オブジェクトへの「state.flag」プロパティを追加することはできませんよ。だから私はこれを何とかして回り、それが可能であれば私自身の状態を作ることができるようにしたいと思います。

state = { 
    "name": "myState", 
    "flag": "mystate-flag.svg.png" 
} 

Answer 1

私は、これはあなたを助けることを願っていますUIB-先行入力

<input typeahead-editable="false" type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control"> 

で先行入力、編集可能= "false" を追加します。あなたが$scope.$watchを追加することができます

Answer 2

：

// listen to customPopupSelected variable changes 
$scope.$watch('customPopupSelected', function (nVal) { 
    // enter this block only if new value is not an object 
    if (nVal && angular.isString(nVal)) { 
    // convert customPopupSelected from a string to desired object 
    $scope.customPopupSelected = { 
     name: nVal, 
     flag: 'URL-TO-SOME-DEFAULT-FLAG' 
    }; 
    } 
}); 

ここでは、あなたの更新plunkerです：http://plnkr.co/edit/jezOW8SEJUh59CzwFpr8?p=preview