AngularJS中访问对象参数及嵌套ng-repeat渲染问题

你遇到的核心问题是直接输出{{x}}时，AngularJS会把对象转换成默认的字符串[object Object]，而不是展示你需要的info和id属性。下面给你两种符合需求的实现方式，以及一个常见的排序坑的解决方案：

方案1：键单独显示，每个数组元素作为子项展示 #

如果你的目标格式是这样的：

name_0
- info: xxx, id: 1
name_1
- info: aaa, id: 4
name_2
- info: bbb, id: 6

只需要修改内层ng-repeat，明确指定要展示的对象属性即可：

<div ng-repeat="(key, items) in $ctrl.anObject">
  {{key}}
  <div ng-repeat="item in items">
    - info: {{item.info}}, id: {{item.id}}
  </div>
</div>

这里把变量名value改成items是为了语义更清晰，你也可以继续用value，不影响功能。

方案2：每个数组元素单独一行，包含键信息 #

如果你的目标格式是每个元素都带上键，比如：

name_0 - info: xxx, id: 1
name_1 - info: aaa, id: 4
name_2 - info: bbb, id: 6

可以调整结构，把键的输出放到内层循环里：

<div ng-repeat="(key, items) in $ctrl.anObject">
  <div ng-repeat="item in items">
    {{key}} - info: {{item.info}}, id: {{item.id}}
  </div>
</div>

额外优化：按name_0、name_1、name_2的顺序遍历 #

默认情况下，AngularJS的ng-repeat会按对象键的字符串顺序遍历，这会导致name_10排在name_2前面（因为字符串排序是按字符逐个比较的）。如果需要按数字后缀从小到大排序，可以自定义一个过滤器：

首先在你的AngularJS模块里添加过滤器：

angular.module('yourAppName').filter('sortByNameIndex', function() {
  return function(obj) {
    // 提取键中的数字部分，按数字排序
    return Object.keys(obj)
      .sort((a, b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1]))
      .reduce((sortedObj, key) => {
        sortedObj[key] = obj[key];
        return sortedObj;
      }, {});
  };
});

然后在ng-repeat中使用这个过滤器：

<div ng-repeat="(key, items) in $ctrl.anObject | sortByNameIndex">
  {{key}}
  <div ng-repeat="item in items">
    - info: {{item.info}}, id: {{item.id}}
  </div>
</div>

这样就能完美实现你想要的展示格式啦！

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