Angular中如何通过ng-repeat在表格行展示JSON数组数据

嘿，我帮你搞定这个Angular表格数据展示的问题——你的核心问题是ng-repeat的层级没处理对，还有数据模型和视图的变量名不匹配，咱们一步步来修正：

问题分析 #

• 初始代码直接访问list.Source，但list是数组（而非单个对象），无法直接获取Source属性
• 更新后的代码存在变量名不匹配：控制器中是$scope.list，视图中却用了setup_list；控制器中是Source数组，视图中写了SourcePortGroups
• 重复的DOM id（reg_input、reg_select）会导致浏览器识别异常

修正后的完整实现 #

1. 控制器数据（确保变量名和视图一致） #

// 调整控制器变量名和视图匹配，或者你也可以把视图里的setup_list改成list
$scope.setup_list = [ 
  { 
    "ID": "1", 
    "Source": [ "AA", "AVV", "WEB", "DEB" ] 
  } 
];

2. 视图代码（修正层级、变量名、DOM id） #

<table id="datatable_demo" class="table"> <!-- 修复原代码中缺失的闭合引号 -->
  <thead>
    <tr role="row">
      <th class="text-center">Source</th>
      <th class="text-center">Target</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一层遍历：获取列表中的每个对象 -->
    <tr role="row" class="" ng-repeat="ff in setup_list">
      <!-- 第二层遍历：遍历当前对象的Source数组，track by $index避免重复元素报错 -->
      <td class="sorting_1" ng-repeat="data in ff.Source track by $index">
        <!-- 用$index生成唯一id，绑定ng-model显示数据 -->
        <input readonly="readonly" id="reg_input_{{$index}}" ng-model="data" class="form-control" type="text"/>
      </td>
      <!-- Target下拉框：同样生成唯一id，建议绑定ng-model方便后续获取选中值 -->
      <td>
        <select id="reg_select_{{$parent.$index}}" class="form-control" ng-model="ff.selectedTarget">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

关键注意事项 #

• 层级遍历顺序：必须先遍历外层的对象数组，再遍历对象内部的Source数组，不能直接跨层级访问数组的属性
• 变量名一致性：控制器中的$scope变量名必须和视图中ng-repeat的迭代源完全一致，否则数据无法绑定
• 唯一DOM id：多个相同组件（如输入框、下拉框）不能共用同一个id，用$index或$parent.$index生成唯一标识，避免DOM冲突
• 只读输入框：通过readonly="readonly"设置只读，同时用ng-model绑定数据，确保数据正确展示

内容的提问来源于stack exchange，提问作者WhoAmI