AngularJS如何循环嵌套数组格式的接口响应数据

没问题，这事儿在AngularJS里用ng-repeat就能轻松搞定！因为你的响应数据是对象结构（键是分组名称，值是对应的数据数组），所以我们需要用AngularJS遍历对象的语法来实现你要的「一个div显示名称+对应数据列表」的效果。

步骤1：控制器中处理接口数据 #

首先在控制器里调用接口，把返回的数据绑定到$scope上（如果用controllerAs语法也可以绑定到实例上，这里用最常用的$scope方式）：

// 假设你的AngularJS模块已经定义好了，比如叫myApp
var app = angular.module('myApp', []);

app.controller('GroupDataController', function($scope, $http) {
    // 调用接口获取数据
    $http.get('/your-api-url')
        .then(function(response) {
            // 将接口返回的数据绑定到scope，供页面渲染使用
            $scope.groupedData = response.data;
        })
        .catch(function(err) {
            console.log('数据请求失败:', err);
        });
});

步骤2：页面模板中循环渲染 #

在HTML模板里，我们用嵌套的ng-repeat：外层遍历对象的键值对（拿到分组名称和对应的数据数组），内层遍历数组里的每条数据：

<div ng-app="myApp" ng-controller="GroupDataController">
    <!-- 遍历每个分组 -->
    <div class="group-wrapper" ng-repeat="(groupName, dataList) in groupedData">
        <!-- 显示分组名称的div -->
        <div class="group-title">*{{ groupName }}*</div>
        
        <!-- 显示对应的数据列表 -->
        <div class="data-list">
            <div class="data-item" ng-repeat="item in dataList">
                <!-- 这里根据你的需求展示item的字段，比如id、time、status等 -->
                ID: {{ item.id }} | 创建时间: {{ item.created_at }} | 状态: {{ item.status }}
            </div>
        </div>
    </div>
</div>

关键说明 #

• (groupName, dataList) in groupedData：这是AngularJS专门用来遍历对象的语法，groupName会自动获取对象的每个键（比如你的my2、my），dataList则是对应键的数组数据。
• 嵌套的ng-repeat="item in dataList"：用来遍历每个分组下的具体数据项，你可以自由调整每个数据项的展示字段和样式。
• 如果需要给分组或列表加样式，直接给对应的div加class就行，比如上面的group-wrapper、group-title等。

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