初始化嵌套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>

在我的柱塞中，你会看到前2个选择了正确的初始化，而第三个没有。有人能建议如何正确地实现这一点吗？

https://plnkr.co/edit/NGcEMNSHCDAYK8UBOKYl

Answer 1

建议将ng-options与select元素一起使用。请将您的选择代码替换为以下示例：

<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创建select选项期间

  {
        "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的末尾，您的值将被选中。

因为在循环中创建了select选项，所以它重置了已经创建的ng-select值。

例如，我将缺省情况下的选项移到了json set的末尾，并选择了该值。

为了便于理解，不建议这样做。检查柱塞：

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

我没有编辑你的代码，我只是替换了你的数据集。

所以,

您应该使用ng-options，如下所示

   <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

免责声明:我已经专注于解释和帮助您选择默认选项，所以不要期望我通过在其中添加数据和描述来美化选项数据。你自己做吧。