2016-05-09 35 views
0

私にはPlunker here illustrating my issueがあります。私は関連付けられたオブジェクトを持っていますdivision。オブジェクトにdivision_idはありませんが、divisionを設定または更新するには、division_idフィールドを設定する必要があります。ここではサンプルオブジェクトです:オプションでng-repeatの選択ボックスに関連付けられたng-model

$scope.user = { 
    name: "John", 
    age: 32, 
    division: { 
    id: 3, 
    name: "Alpha" 
    } 
}; 

そして、例の部門:

$scope.divisions = [ 
    { 
    name: "Gamma", 
    id: 1 
    }, 
    { 
    name: "Alpha", 
    id: 3 
    }, 
    { 
    name: "Beta", 
    id: 5 
    } 
]; 

私は選択ボックスを構築しています方法は、私はNG-モデルを追跡する必要性を回避望んれた、ng-repeatであります選択された値に対して

<div class="form-group"> 
     <label for="">Division</label> 
     <select type="text" ng-model="user.division_id"> 
     <option ng-repeat="division in divisions" 
      ng-selected="user.division.id == division.id">{{ division.name }}</option> 
     </select> 
    </div> 

デモで見ることができるように、selected属性が右のオプションの上に置かれているが、それでも選択ボックスの表示が空白になっています。オブジェクトにdivision_id: 3を追加しても、それは空白のままです。読み込みと更新の際にオブジェクトの変換を行うことなく、これをどのように動作させることができますか?

編集:重複としてフラグが立てされているこの問題に対処するために、私はng-repeat、ないng-optionsで選択ボックスを構築する方法を求めているので、これはユニークだと思います。答えは、提案された複製の回答と似ていますが、私は他の人がこの方法に執着し、答えが別のテクニックを必要とするのを見るのに役立つかもしれないと思います。

+0

の可能性のある重複した[NG-選択select要素では動作しない](http://stackoverflow.com/questions/17645620/ng-selected-not-working-in-select-element) –

+0

なぜすることができます」あなたは単に 'ng-model =" user.division "'にバインドしますか? – dfsq

答えて

0

次のように選択を更新すると、デフォルトでユーザーdivision.idに表示されます。あなたが別のモデルdivision_idを持ってしたいように見えた

<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id"> 

、私はこのために考えることができる唯一の理由は、あなたが選択が更新されたときにuserモデルの持続性を制御したかったということです。何らかの理由で、エンドユーザーの選択をユーザーモデル(またはメモリ内のユーザーオブジェクト)に代行して更新したい場合は、コピーを使用する/それを行うにはさまざまな方法がありますが、それが何であるかは明確ではありませんあなたは尋ねている。

Updated plunkr

は、同じオプションng-repeat構文を保持しているために働いているだろうが、これはオプションに対処するための推奨角度な方法であることに注意してください。

+0

問題は 'user.division.name'も更新する必要があるということです。 – dfsq

+0

それでは、 'ng-model =" user.division "'を使い、d.id "によって' divのトラックでdの 'ng-options =" dをd.nameとして使用してください。私は上記を更新しました。 – Dan

+0

はい、私は30分前に言った。私はこれを解決策として提案します。 – dfsq

0

プランナーごとに、ng-modelディレクティブをselectタグから削除して機能させる必要があります。

あなたのコードのためにdivision_id変数を設定する必要がある場合は、NG-INITを使用することができます。

<div class="form-group"> 
    <label for="">Division</label> 
    <select type="text"> 
     <option ng-repeat="division in divisions" 
      ng-selected="user.division.id == division.id" 
      ng-init="division_id=division.name">{{ division.name }} 
     </option> 
     </select> 
    </div> 
+0

Byモデルを削除すると、user.divisionは決して更新されません。 'ng-init'はお勧めしません。 – Dan