Как динамически загружать данные JSON в таблицу с AngularJS?

Question

У меня есть виджет выбора столбцов, который содержит список имен с уникальными идентификаторами. Существует серверная служба, которая возвращает объект с данными.

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

Мне нужно создать таблицу в формате html, используя AngularJS, которая динамически добавляет / удаляет строки, когда я выбираю конкретный идентификатор из моего средства выбора столбцов.

<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

Бэкэнд-сервис должен вернуть объект с данными в формате ниже, чтобы повторить это в 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 2

Я думаю, вы хотите что-то подобное, попробуйте и дайте мне знать

Выберите несколько имен столбцов для отображения, удерживая клавишу 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>

Answer 3

Ваш выходной объект должен быть массивом объектов: Пример удара:

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