Question

从Web服务我得到一个JSON字符串。它可能会根据请求而有所不同。 2 JSON结果

结果1

[
  {
    "Key": 1,
    "ID": 1,
    "applicationId": "1",
    "applicationName": "APP1"
  },
  {
    "Key": 2,
    "ID": 1,
    "applicationId": "2",
    "applicationName": "APP2"
  }
]

结果2

[
  {
    "OrgKey": 1,
    "ID": 1,
    "OrgID": "1",
    "OrgName": "Org1"
  },
  {
    "OrgKey": 2,
    "ID": 4,
    "OrgID": "6",
    "OrgName": "Org2"
  }
]

如何在表格中显示？

在控制器js文件中，我使用$http.get方法，在Success方法中我使用

$scope.resultData = data;

但是在HTML中我将如何显示动态内容？

<table>
<thead>
  <tr>
    <th ng-repeat = "result in resultData">
     <!-- Not the right way -->
     <!-- Here I want to put the headers like "Key,ID" ... -->
    </th>
   </tr> </thead>
  <tbody>
  <tr ng-repeat = ""result in resultData">
   <td> {{result.Key }} </td>
   <!-- When the firlds vary, how to put? ->
  </tr>
  </tbody>
</table>

有可能吗？如果是这样如何？感谢。

Answer 1

首先，您应该获得第一行设置表格的标题

<thead>
  <tr>
    <th ng-repeat="(header, value) in resultData[0]">
      {{header}}
    </th>
  </tr>
</thead>

在你的tbody之后，你应该首先得到你的行，然后在行内行进所有单元格，

<tbody>
  <tr ng-repeat="row in resultData">
    <td ng-repeat="cell in row">
      {{cell}}
    </td>
  </tr>
</tbody>

这是工作PLUNKER ...

<强>更新

有些用户询问是否可以在不对标题及其值进行排序的情况下进行处理...

答案是是，但在开始之前你应该知道为什么它已经按字母顺序排序......

angular ng-repeat指令与数组和对象的工作方式不同......如果你使用数组，你可以对它进行排序，但这不是对象的选项，这里有discussion关于它... < / p>

所以现在最好的方法是在我们在ng-repeat中使用它们之前将对象值推送到数组中。

这是第二个PlUNKER

注意：您将看到我从数组中删除$$ hashKey，因为它们不是原始元素的属性，angular会自动将它们添加到对象中以观察更改

Answer 2

我能够根据其他人的示例和文档构建动态表格。 http://jsfiddle.net/lastlink/v7pszemn/1/

<tr>
    <th class="{{header}}" ng-repeat="(header, value) in items[0]" ng-click="changeSorting(header)">
    {{header}}
  <i ng-class="selectedCls2(header)"></i>
</tr>
<tbody>
<tr ng-repeat="row in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
    <td ng-repeat="cell in row">
          {{cell}}
   </td>
</tr>

虽然列没有乱序，但在我的.net项目中它们是有序的。

Answer 3

也许这不是最好的解决方案，但它对我来说确实很有效。在我的当前项目使用webSocket进行数据流传输，只要我从服务器获取数据，就需要在ui中动态显示它。

所以解决方案非常简单，做了我想要的......

在$ timeout中包装函数。

vm.testErrors = [];

socket.onmessage(function(event) {    
  if (event.data !== 'connected') {
    $timeout(function() {
      addNewTestWithError(event.data);
    }, 0);
  } 
});

<div ng-repeat="item in vm.testErrors>
  <h3>{{item.fullTitle}}</h3>
  <h4>{{item.error}}</h4>
</div>

希望有所帮助

在AngularJS中显示动态JSON

3 个答案: