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

【问题标题】：Initializing select value in nested ng-repeat在嵌套的 ng-repeat 中初始化选择值
【发布时间】：2017-03-25 05:20:03
【问题描述】：

我在使用嵌套 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

【问题讨论】：

标签： javascript html angularjs select ng-repeat

【解决方案1】：

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

<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;
      });
    }
  };
});

【讨论】：

【解决方案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 的末尾，您的值将被选中。

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

例如，我已将默认情况下的选项移至 json 集的末尾，并且该值被选中。

为了理解，不建议这样做。检查 plunker：

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

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

【讨论】：