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

创建选择选项期间

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

声明：我专注于解释并帮助您选择默认选项，所以不要指望我通过在其中附加数据和desc来美化选项数据。自己做。

在嵌套的ng-repeat中初始化选择值

2 个答案: