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

我的桌子看起来像。

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

将$scope.graphs = response.data;存储在变量ex：

中

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

观点：

{
  "name": "example",
  "properties": {
    "key1": "val1",
    "key2": "val2"
  }
}

Angular table

在Angular中使用ng-repeat在表中显示json响应

2 个答案: