如何在AngularJS中遍历嵌套对象属性？ng-repeat使用失效求助

嘿，我明白你在尝试用ng-repeat="(key, value)"遍历嵌套JSON对象时遇到了问题——这种情况我帮不少开发者捋顺过，咱们一步步来解决。

首先先还原一个常见的场景（毕竟你没贴具体JSON，但这类问题的结构大同小异）：
假设你的示例JSON是这样的：

{
  "profile": {
    "name": "Dharita",
    "details": {
      "email": "dharita@example.com",
      "location": "India"
    },
    "skills": ["AngularJS", "JavaScript", "HTML/CSS"]
  }
}

你遇到的问题大概率是这样： #

直接用单层ng-repeat="(key, value)"遍历后，实际输出会变成类似：

profile: [object Object]

完全没展开嵌套的属性，和你想要的层级化预期输出差远了。

解决核心：多层嵌套ng-repeat，区分对象/数组类型 #

ng-repeat="(key, value)"本身是支持遍历对象键值对的，但它只能处理当前层级的内容。要遍历嵌套对象，你需要在每一层对象里再套一层ng-repeat，同时还要区分当前值是普通类型、对象还是数组，针对性处理：

完整HTML示例代码：

<div ng-app="myApp" ng-controller="myCtrl">
  <!-- 遍历第一层对象 -->
  <div ng-repeat="(parentKey, parentValue) in nestedJson">
    <h3>{{ parentKey }}</h3>
    <!-- 遍历第二层对象 -->
    <div ng-repeat="(childKey, childValue) in parentValue">
      <p><strong>{{ childKey }}:</strong>
        <!-- 如果是嵌套对象，继续遍历 -->
        <span ng-if="typeof childValue === 'object' && !Array.isArray(childValue)">
          <div class="nested-indent">
            <div ng-repeat="(grandKey, grandValue) in childValue">
              {{ grandKey }}: {{ grandValue }}
            </div>
          </div>
        </span>
        <!-- 如果是数组，用数组遍历语法 -->
        <span ng-if="Array.isArray(childValue)">
          <ul>
            <li ng-repeat="skill in childValue">{{ skill }}</li>
          </ul>
        </span>
        <!-- 普通字符串/数字直接显示 -->
        <span ng-if="typeof childValue !== 'object'">{{ childValue }}</span>
      </p>
    </div>
  </div>
</div>

<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.nestedJson = {
    "profile": {
      "name": "Dharita",
      "details": {
        "email": "dharita@example.com",
        "location": "India"
      },
      "skills": ["AngularJS", "JavaScript", "HTML/CSS"]
    }
  };
});
</script>

<style>
.nested-indent { margin-left: 20px; }
</style>

这样就能得到你的预期输出： #

profile
name: Dharita
details:
  email: dharita@example.com
  location: India
skills:
  - AngularJS
  - JavaScript
  - HTML/CSS

进阶技巧：递归指令处理任意层级嵌套 #

如果你的JSON嵌套层级不固定（可能有3层、4层甚至更多），手动写多层ng-repeat太麻烦，可以写一个递归指令自动处理：

angular.module('myApp').directive('recursiveObjectRepeat', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    template: `
      <div ng-repeat="(key, value) in data" class="repeat-item">
        <span><strong>{{ key }}:</strong></span>
        <!-- 递归调用指令处理嵌套对象 -->
        <div ng-if="typeof value === 'object' && !Array.isArray(value)" class="nested">
          <recursive-object-repeat data="value"></recursive-object-repeat>
        </div>
        <!-- 处理数组 -->
        <ul ng-if="Array.isArray(value)">
          <li ng-repeat="item in value">{{ item }}</li>
        </ul>
        <!-- 普通值 -->
        <span ng-if="typeof value !== 'object'">{{ value }}</span>
      </div>
    `
  };
});

使用时只需要一行：

<recursive-object-repeat data="nestedJson"></recursive-object-repeat>

不管你的JSON嵌套多少层，都能自动展开显示。

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