在 Angular 中使用 ng-repeat 在表中显示以下 json 响应答案

【问题标题】：show following json response inside a table using ng-repeat in Angular在 Angular 中使用 ng-repeat 在表中显示以下 json 响应
【发布时间】：2016-09-08 10:14:37
【问题描述】：

我有如下回复

回应：

 response: 
{"json":
{"response":
{"servicetype":"",
"functiontype":"",
"statuscode":"0",
"statusmessage":"Success",
"data":[{"graphtype":"piechart",
"xlabel":"state",
"ylabel":"count",
"s1":"contact",
"s2":"User",
"data":["Total Contacts: 1 Users: 20",
[{"x":"Karnataka","s1":"1","s2":"15","lat":"12.9716","long":"77.5946"},
{"x":"New Delhi","s1":"0","s2":"5","lat":"28.6139","long":"77.2090"}]]}]}}}

我需要使用 ng-repeat 动态插入表格行名、表格数据名。

我的桌子应该是这样的。

State                  Contact                      User 
 Karnatka                1                           15
 New Delhi               0                           5

【问题讨论】：

你从哪里得到这个回复？

标签： angularjs json object angularjs-ng-repeat ng-repeat

【解决方案1】：

尝试这种方式访问动态标题和数据。

您的 json 响应看起来相当复杂且难以访问，请尽量从服务器端提供更简单的 json 响应。

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = {"json":
{"response":
{"servicetype":"",
"functiontype":"",
"statuscode":"0",
"statusmessage":"Success",
"data":[{"graphtype":"piechart",
"xlabel":"state",
"ylabel":"count",
"s1":"contact",
"s2":"User",
"data":["Total Contacts: 1 Users: 20",
[{"x":"Karnataka","s1":"1","s2":"15","lat":"12.9716","long":"77.5946"},
{"x":"New Delhi","s1":"0","s2":"5","lat":"28.6139","long":"77.2090"}]]}]}}};
  $scope.title = $scope.greeting.json.response.data[0];
  $scope.data = $scope.greeting.json.response.data[0].data[1];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
    <table>
      <tr>
        <th>{{title.xlabel}}</th>
        <th>{{title.s1}}</th>
        <th>{{title.s2}}</th>
      </tr>  
      <tr ng-repeat="row in data track by $index">
        <td>{{row.x}}</td>
        <td>{{row.s1}}</td>
        <td>{{row.s2}}</td>
      </tr>
    </table>
</div>

【讨论】：

【解决方案2】：

将 response.data 存储在变量 ex 中：

$scope.graphs = response.data;

观点：

<div ng-repeat="graph in graphs"> 

<table>
  <tr>
    <th>{{graph.xlabel}}</th>
    <th>{{graph.s2}}</th> 
    <th>{{graph.s1}}</th>
  </tr>
  <tr ng-repeat="state in graph.data[1]">
    <td>{{ state.x }}</td>
    <td>{{ state.s2 }}</td>
    <td>{{ state.s1 }}</td>
  </tr>
</table>

</div>

Angular table

【讨论】：