Got it, let's build this interactive expandable JSON preview with AngularJS. Your data has nested objects and arrays, so recursion is the perfect approach here—since we don't know how deep the structure might go. Let's break this down step by step with working code examples:

1. 先修正数据格式（重要！） #

First off, your original JSON has a few syntax errors (missing commas, unquoted keys). Let's fix that in the Angular controller first:

angular.module('jsonPreviewApp', [])
  .controller('JsonPreviewCtrl', function($scope) {
    // 修正后的合法JSON数据
    $scope.data = [
      { 
        test: { innertest: "2345", outertest: "abcd" }, 
        trans: { sig: "sou", trip: [{ one: "2" }, { two: "3" }], otherac: "iii" }
      },
      { 
        test: { innertest: "uuu", outertest: "rrr" }, 
        trans: { sig: "e", trip: [{ one: "9" },{ two: "8" }], otherac: "eee" } 
      }
    ];

    // 用于跟踪每个节点的展开状态，用唯一路径作为键避免冲突
    $scope.expandedNodes = {};
  });

2. 核心实现：递归模板渲染 #

AngularJS lets us use ng-include to create recursive templates, which is ideal for nested JSON structures. We'll create a main template and a recursive partial template.

主HTML结构 #

<div ng-app="jsonPreviewApp" ng-controller="JsonPreviewCtrl">
  <h3>JSON 可展开预览</h3>
  <!-- 初始化递归渲染，给根节点设置唯一路径标识 -->
  <div ng-include="'json-node.html'" ng-init="node=data; path='root'"></div>
</div>

递归模板（json-node.html） #

This template handles objects, arrays, and primitive values, with expand/collapse functionality:

<div class="json-node">
  <!-- 处理数组类型 -->
  <div ng-if="Array.isArray(node)">
    <span ng-click="expandedNodes[path] = !expandedNodes[path]" class="toggle-btn">
      {{ expandedNodes[path] ? '▼' : '▶' }}
    </span>
    <span class="type-label">Array ({{ node.length }} items)</span>
    <div ng-show="expandedNodes[path]" class="nested-content">
      <div ng-repeat="(index, item) in node">
        <div ng-include="'json-node.html'" 
             ng-init="node=item; path=path + '.' + index"></div>
      </div>
    </div>
  </div>

  <!-- 处理对象类型 -->
  <div ng-if="node && typeof node === 'object' && !Array.isArray(node)">
    <span ng-click="expandedNodes[path] = !expandedNodes[path]" class="toggle-btn">
      {{ expandedNodes[path] ? '▼' : '▶' }}
    </span>
    <span class="type-label">Object</span>
    <div ng-show="expandedNodes[path]" class="nested-content">
      <div ng-repeat="(key, value) in node">
        <span class="key-label">{{ key }}:</span>
        <div ng-include="'json-node.html'" 
             ng-init="node=value; path=path + '.' + key"></div>
      </div>
    </div>
  </div>

  <!-- 处理基本类型（字符串、数字、布尔、null） -->
  <div ng-if="node === null || typeof node !== 'object'" class="primitive-value">
    {{ node }}
  </div>
</div>

3. 样式优化（可选但推荐） #

Add some CSS to make the preview look clean and readable:

.json-node {
  margin-left: 15px;
  line-height: 1.6;
}
.toggle-btn {
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
}
.type-label {
  color: #666;
  font-weight: bold;
}
.key-label {
  color: #2c3e50;
  font-weight: bold;
  margin-right: 5px;
}
.primitive-value {
  color: #e74c3c;
  margin-left: 20px;
}
.nested-content {
  margin-left: 15px;
}

4. 工作原理说明 #

• 递归渲染: Using ng-include with ng-init lets us pass the current node and its unique path to the template, so we can handle any nested depth automatically.
• 展开状态管理: The expandedNodes object uses the node's full path (like root.0.trans.trip.0) as a key to track expansion state—this avoids conflicts between nodes with the same name in different parts of the JSON.
• 类型区分: We check if the node is an array, object, or primitive value, and render each type with appropriate styling and interactive behavior.

This solution is flexible, works with any JSON structure, and follows AngularJS's data-driven approach perfectly.

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