初始化嵌套的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来美化选项数据。自己动手。