如何使用 AngularJS 在表中动态加载 JSON 数据？答案

【问题标题】：How to dynamically load JSON data in a table with AngularJS?如何使用 AngularJS 在表中动态加载 JSON 数据？
【发布时间】：2019-10-10 09:23:40
【问题描述】：

我有一个列选择器小部件，其中包含具有唯一 ID 的名称列表。有一个后端服务返回一个带有数据的对象。

output = {
id: 1, name: "john", title: "developer",
id: 2, name: "mark", title: "designer",
id: 3, name: "sally", title: "HR"
...
}

我需要使用 AngularJS 在 html 中创建一个表格，当我从列选择器中选择特定 ID 时，该表格会动态添加/删除行。

<div ng-app="MyApp" ng-controller="MyController">
        <table border = "1">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Title</th>
            </tr>
            <tbody ng-repeat="m in output">
                <tr>
                    <td>{{m.id}}</td>
                    <td>{{m.name}}</td>
                    <td>{{m.title}}</td>                    
                </tr>
            </tbody>
        </table>
</div>

我应该在控制器中添加什么以获得所需的结果？除了使用$scope还有什么办法吗？

【问题讨论】：

output 变量应该是一个对象数组。
列选择器是什么意思？
是否有选择框选择要显示的列？

标签： javascript html json angularjs object

【解决方案1】：

你的输出对象应该是一个对象数组：示例打击：

$sope.output = [
   { id: 1, name: "john", title: "developer"} ,
   { id: 2, name: "mark", title: "designer"} ,
   { id: 3, name: "sally", title: "HR"}
];

【讨论】：

【解决方案2】：

后端服务应该返回一个带有以下格式数据的对象，以便在 HTML 模板中迭代。

[{id: 1, name: "john", title: "developer"},
{id: 2, name: "mark", title: "designer"},
{id: 3, name: "sally", title: "HR"}]

演示：

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

module.controller("myController", function($scope) {
      $scope.output = [{id: 1, name: "john", title: "developer"},
				{id: 2, name: "mark", title: "designer"},
				{id: 3, name: "sally", title: "HR"}];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
        <table border = "1">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Title</th>
            </tr>
            <tbody ng-repeat="m in output">
                <tr>
                    <td>{{m.id}}</td>
                    <td>{{m.name}}</td>
                    <td>{{m.title}}</td>                    
                </tr>
            </tbody>
        </table>
</div>

【讨论】：

【解决方案3】：

我想你想要这样的东西，试试看告诉我

按住ctrl键选择要显示的多个列名

angular.module("MyApp", [])

  .controller("MyController", ($scope) => {

    $scope.columns = []

    $scope.output = [{
        id: 1,
        name: "john",
        title: "developer"
      },
      {
        id: 2,
        name: "mark",
        title: "designer"
      },
      {
        id: 3,
        name: "sally",
        title: "HR"
      }
    ]

    $scope.getColumns = () => {
      return Object.keys($scope.ouput).filter(name => $scope.columns.indexOf(name) !== -1)
    }

  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
  <select ng-model="columns" multiple>
    <option value="id">ID</option>
    <option value="name">Name</option>
    <option value="title">Title</option>
  </select>
  <table border="1">
    <tr>
      <th ng-repeat="column in columns">{{column}}</th>
    </tr>
    <tbody>
      <tr ng-repeat="m in output">
        <td ng-repeat="column in columns">{{m[column]}}</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：