AngularJS新手求助：如何将JSON数据以表格格式展示

嘿，作为AngularJS新手，要把这种嵌套结构的JSON数据展示成表格确实得用点嵌套循环的小技巧，我这就给你一个完整的可运行示例，看完你就能上手啦！

首先先理清楚你的数据结构：你的JSON里有一个cars数组，每个元素包含汽车品牌name，以及该品牌下不同地区的车型数组models，每个models元素里有state（地区）和model（车型）信息。我们需要用**嵌套的ng-repeat**来遍历这两层数据，同时处理品牌单元格的跨行显示，让表格更规整。

完整实现代码 #

1. HTML视图部分 #

<!DOCTYPE html>
<html ng-app="carApp">
<head>
    <title>AngularJS JSON Table</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body ng-controller="carController">
    <h2>汽车品牌与地区车型表</h2>
    <table>
        <thead>
            <tr>
                <th>品牌</th>
                <th>地区</th>
                <th>车型</th>
            </tr>
        </thead>
        <tbody>
            <!-- 外层循环遍历每个汽车品牌，开启跨行组 -->
            <tr ng-repeat-start="car in cars">
                <!-- 品牌单元格，合并当前品牌下所有车型的行数 -->
                <td rowspan="{{car.models.length}}">{{car.name}}</td>
                <!-- 渲染当前品牌的第一个车型 -->
                <td>{{car.models[0].state}}</td>
                <td>{{car.models[0].model}}</td>
            </tr>
            <!-- 内层循环遍历当前品牌下剩余的车型，结束跨行组 -->
            <tr ng-repeat-end ng-repeat="model in car.models track by $index" ng-if="$index > 0">
                <td>{{model.state}}</td>
                <td>{{model.model}}</td>
            </tr>
        </tbody>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

2. 控制器代码（app.js） #

var app = angular.module('carApp', []);

app.controller('carController', function($scope) {
    // 直接把你的JSON数据绑定到作用域上
    $scope.cars = [
        {
            "name": "Ford",
            "models": [
                {"state": "MH", "model": "Fiesta"},
                {"state": "BHR", "model": "Focus"},
                {"state": "DL", "model": "Mustang"}
            ]
        },
        {
            "name": "BMW",
            "models": [
                {"state": "MH", "model": "320"},
                {"state": "BHR", "model": "X3"},
                {"state": "DL", "model": "X5"}
            ]
        },
        {
            "name": "Fiat",
            "models": [
                {"state": "MH", "model": "300"},
                {"state": "BHR", "model": "Panda"},
                {"state": "DL", "model": "500"}
            ]
        }
    ];
});

关键逻辑说明 #

• ng-repeat-start + ng-repeat-end：用来创建跨行的表格行组，让每个品牌名称只显示一次，对应其下所有车型的行。
• rowspan="{{car.models.length}}"：动态计算品牌单元格需要合并的行数，确保和该品牌下的车型数量一致。
• track by $index：避免AngularJS因为不同品牌下出现相同的state或model值而报错，保证循环的稳定性。

实用小提示 #

如果你的JSON数据是从后端API获取的，只需要把控制器里的直接赋值换成$http请求即可，比如：

$http.get('/your-api-url/cars')
     .then(function(response) {
         $scope.cars = response.data.cars;
     });

表格的样式也可以根据自己的需求修改CSS，比如调整颜色、边框粗细、单元格间距等。

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