javascript - 动态添加表中的列

Question

我正在尝试在表中动态添加新列。我有以下对象，该对象是从 Web 服务 api 响应中返回的。如何显示 myArray 对象附加了许多其他字段(新列)的动态列

 $scope.myArray =  [
    {
  "contacts": [
    {
      "id": "1",
      "contact": {
        "name": "Sam",
        "Email": "ddd@co.com",
        "PhoneNo": 2355
      }
    },
    {
      "id": "2",
      "contact": {
        "name": "John",
        "Email": "test@co.com",
        "PhoneNo": 2355
      }
    }
  ]
}
  ];

我尝试查看谷歌中一些答案中提供的示例。在我的下面JSFIDDLE ，我只得到键名，但没有得到值。如何使用 ng-repeat 实现键和值，其中键名称是动态的。

Answer 1

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.myArray =  [
    {
  "contacts": [
    {
      "id": "1",
      "contact": {
        "name": "Sam",
        "Email": "ddd@co.com",
        "PhoneNo": 2355
      }
    },
    {
      "id": "2",
      "contact": {
        "name": "John",
        "Email": "test@co.com",
        "PhoneNo": 2355
      }
    }
  ]
}
  ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in myArray[0].contacts">
    <td ng-repeat="(key, val) in row.contact">{{ val }}</td>
  </tr>
</table>