初始化嵌套的ng-repeat中的選擇值

Question

我無法正確初始化嵌套的ng-repeats構建的表單中的選擇框。我有使用ng-repeat構建的父錶行，以及其值在父行中綁定到屬性的選擇框。選擇框中的值從嵌套的子數組中拉出，構成行的可用選擇。

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

在我Plunker，你會看到第一個2個選擇正確初始化，但第3次沒有。有人可以建議如何正確實施？

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-重複

{ 
     "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選擇值。

例如，我已經將默認選項移至json集的末尾，並且該值正在被選中。

這不是建議理解。 檢查到plunker：

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

我沒有編輯你的代碼，我剛剛更換你的數據集。

所以，

你應該使用NG選項如下

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

最終代碼 https://plnkr.co/edit/w8nOENAiL72SX68L7LVv?p=preview

免責聲明： 我必須集中講解，幫助您選擇默認選項，所以不要指望我通過附加數據和desc來美化選項數據。自己動手。