AngularJS:从HTML表中读取Json数据

AngularJS 是一个用于构建动态Web应用的JavaScript框架，它通过双向数据绑定简化了前端开发。要从HTML表中读取JSON数据，你可以使用AngularJS的ng-repeat指令来遍历JSON对象，并将其内容显示在表格中。

基础概念

双向数据绑定：AngularJS的核心特性之一，它允许模型和视图之间的自动同步。
ng-repeat：一个指令，用于遍历数组或对象，并为每个元素生成HTML代码。

应用场景

当你需要将服务器返回的JSON数据动态地展示在网页上时。
在构建管理界面或者数据可视化工具时。

示例代码

以下是一个简单的例子，展示了如何使用AngularJS从控制器中读取JSON数据，并将其显示在HTML表格中。

HTML部分

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS JSON Table Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat="item in jsonData">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
        </tr>
    </table>
</body>
</html>

JavaScript部分

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

app.controller('myController', function($scope) {
    $scope.jsonData = [
        { "id": 1, "name": "Alice", "age": 25 },
        { "id": 2, "name": "Bob", "age": 30 },
        { "id": 3, "name": "Charlie", "age": 35 }
    ];
});