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之外，还有其他方法吗？

Answer 1

您的输出对象应该是对象数组：打击示例：

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

Answer 2

后端服务应返回具有以下格式数据的Object，以在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>

Answer 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>

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

3 个答案: