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

Question

我有一个列选择器小部件，其中包含具有唯一 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 之外，还有其他方法吗？

标签： javascripthtmljsonangularjsobject

Answer 1

我想你想要这样的东西，试试看，让我知道

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>