如何将angular.forEach结果存储到表格每行，解决ng-repeat行覆盖问题

核心原因 #

表格行覆盖是因为你没有维护统一的表格数据源数组，每次生成的单条家庭统计数据没有持久存储，渲染时自然只能显示最后一次处理的结果。

修正步骤 #

1. 控制器初始化阶段先声明全局表格数据源数组，后续所有家庭统计数据都往该数组中追加
2. 修正原有代码中的语法错误、未定义变量问题
3. 完成单条家庭数据统计后，将组装好的行数据push到全局数组中，Angular会自动触发ng-repeat更新视图

代码修改示例 #

1. 初始化全局数据源 #

在控制器逻辑最前面添加：

// ng-repeat直接绑定该数组渲染表格
$scope.tableData = [];

2. 修正getFamily方法语法错误 #

原方法中http请求配置多了多余的闭合括号，修正后：

$scope.getFamily = function(name) {
  var child_name= name.child_name;
  var mom_name= name.mom_name;
  $http({
    method: 'post',
    url: 'url',
    data: some_param,
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  }).then(function(result) {
    var name_data = result.data;
    // 统计性别数量
    var total = { mom: mom_name, male: 0, female: 0, female_name: []}; 
    
    for(var i  = 0; i < name_data.length; i++) {
      if(name_data[i]['gender'] == 'male'){
        total['male']++;   
      } else if(name_data[i]['gender'] == 'female'){
        total['female']++;  
        total['female_name'].push(name_data[i]['child_name']);
      }
    }
    $scope.getChildAge(total);
  });
}

3. 修正getChildAge逻辑，追加数据到全局数组 #

$scope.getChildAge= function(data) {
  var mom= data.mom;
  var female_total= data.female;
  var female_name= data.female_name;

  $http({
    method: 'post',
    url: 'url',
    data: some_param,
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  }).then(function(result) {
    var child_age = result.data;
    var count_num = 0;
    // 修正原代码未定义的children变量
    for(var i  = 0; i < child_age.length; i++) {
      if(child_age[i] > 5){
        count_num++;   
      }
    }
    // 组装行数据追加到全局数组，不会覆盖之前的内容
    $scope.tableData.push({
      momName: mom,
      maleCount: data.male,
      femaleCount: female_total,
      overFiveFemaleCount: count_num,
      femaleNames: female_name.join('、')
    })
  });
}

页面绑定代码 #

用ng-repeat绑定全局数组即可实现多行渲染：

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>母亲姓名</th>
      <th>男孩数量</th>
      <th>女孩数量</th>
      <th>5岁以上女孩数量</th>
      <th>女孩姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in tableData track by $index">
      <td>{{row.momName}}</td>
      <td>{{row.maleCount}}</td>
      <td>{{row.femaleCount}}</td>
      <td>{{row.overFiveFemaleCount}}</td>
      <td>{{row.femaleNames}}</td>
    </tr>
  </tbody>
</table>

注意事项 #

• 如果需要保证表格行顺序和第一次接口返回的母亲顺序一致，可以在调用angular.forEach时给每个家庭数据附加索引标识，组装完成后按索引插入到tableData对应位置，避免异步请求返回顺序不同导致的行乱序
• 如果需要处理加载状态，可以在调用getProfile时设置loading标识，所有请求完成后关闭loading

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