在 Angular 中使用 ng-repeat 在 table 中显示以下 json 响应

Question

我有如下回复

回复：

 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 动态插入 table 行名称，table 数据名称。

我的table应该是这样的。

State                  Contact                      User 
 Karnatka                1                           15
 New Delhi               0                           5

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

Answer 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

在 Angular 中使用 ng-repeat 在 table 中显示以下 json 响应

show following json response inside a table using ng-repeat in Angular

json

object

angularjs

ng-repeat

angularjs-ng-repeat