ネストされたng-repeatの選択値の初期化

Question

ネストされたng-repeatsで構築されたフォームの選択ボックスを適切に初期化する際に問題があります。私は、ng-repeatで構築された親テーブルの行と、値が親行の属性にバインドされた選択ボックスを持っています。選択ボックスの値は、ネストされた子配列から引き出され、行の選択肢を構成します。私Plunkerで

<tr ng-repeat="asv in asvs"> 
    <td>{{asv.scenario_asv_id}}</td> 
    <td>{{asv.asv_target_id}}</td> 
    <td><select ng-model="asv.asv_target_id"> 
     <option ng-repeat="version in asv.asv_targets" 
       value="{{version.asv_target_id}}" 
       ng-selected="asv.asv_target_id == version.asv_target_id"> 
        ID: {{version.asv_target_id}} - Name: {{version.asv_target_desc}} 
        </option> 
     </select> 
     </td> 
</tr> 

、あなたは最初の2つの選択を正しく初期化、まだ第三にはないことがわかります。誰かがこれを正しく実装する方法をアドバイスできますか？

https://plnkr.co/edit/NGcEMNSHCDAYK8UBOKYl

Answer 1

あなたが選択要素とNG-オプションを使用することをお勧めします。以下の例を使用して選択し、コードを交換してください：

<select convert-to-number 
ng-options="version.asv_target_id as ('ID: ' + version.asv_target_id + ' - Name: ' + version.asv_target_desc) for version in asv.asv_targets track by version.asv_target_id" 
ng-model="asv.asv_target_id"> 
</select> 

あなたの値が数値であるため、あなたはここで起こって問題は、選択の作成中であるhttps://code.angularjs.org/1.4.7/docs/api/ng/directive/select

module.directive('convertToNumber', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     ngModel.$parsers.push(function(val) { 
     return val != null ? parseInt(val, 10) : null; 
     }); 
     ngModel.$formatters.push(function(val) { 
     return val != null ? '' + val : null; 
     }); 
    } 
    }; 
}); 

Answer 2

ごとに次のディレクティブを追加する必要がありますng-repeatを使用するオプション

{ 
     "scenario_asv_asv_target_id": "16150-CI101592-3475", 
     "scenario_asv_id": 16150, 
     "appl_ci_id": "CI101592", 
     "asv_target_id": 3475, 
     "asv_target_desc": "Default General Purpose", 
     } 

条件に一致するデータをjsonの最後に移動すると、値が選択されます。

ループでは、選択オプションが作成されるため、すでに作成されたng-select値がリセットされるためです。

たとえば、デフォルトで設定されるオプションをjsonセットの最後に移動し、その値が選択されています。

これはお勧めしません。 plunkerへ チェック：

https://plnkr.co/edit/G83l6OdIfr5vlNgMSeR7?p=preview

私はあなたのコードを編集していないが、私はちょうどあなたのデータセットを交換しました。

ので、

<tr ng-repeat="asv in asvs"> 
     <td>{{asv.scenario_asv_id}}</td> 
     <td>{{asv.asv_target_id}}</td> 
     <td> 
     <select ng-model="asv.asv_target_id" 
     ng-options="version.asv_target_id as version.asv_target_desc for version in asv.asv_targets" 
     ng-selected="true"> 

      </select> 
      </td> 
    </tr> 

最終的なコードに次のようにあなたはNG-オプションを使用する必要があります

https://plnkr.co/edit/w8nOENAiL72SX68L7LVv?p=preview

免責事項： 私が説明すると、デフォルトのオプションを選択する助けに濃縮物を持っているので、私がオプションのデータを追加し、それにdescを付けることによって、オプションのデータをあらかじめ確認するとは思わない。あなた自身でそれをやってください。