使用AngularJS的JSON输出

Question

I am trying to output JSON in a table format using AngularJS where I get columns and rows but don't know where to start. 我正在尝试使用AngularJS以表格式输出JSON，在此我可以获取列和行，但不知道从哪里开始。 I worked a little but can't get anywhere. 我工作了一点，但是什么都做不了。 Can anyone help me output JSON. 谁能帮我输出JSON。 Please find below output of the table should look like and the JSON 请在下表的输出中找到应该看起来像JSON的样子

**OUTPUT:**


 Todays Date           |  Yesterdays Date      | Current Date        |     Close Date

 4/13/13 8:29:09 PM       4/12/13 1:20:09 PM     5/13/13 4:29:09 PM      5/13/13 4:29:09 PM
 4/13/13 8:29:09 PM       4/12/13 1:20:09 PM     5/13/13 4:29:09 PM      5/13/13 4:29:09 PM
 4/13/13 8:29:09 PM       4/12/13 1:20:09 PM     5/13/13 4:29:09 PM      5/13/13 4:29:09 PM
 4/13/13 8:29:09 PM       4/12/13 1:20:09 PM     5/13/13 4:29:09 PM      5/13/13 4:29:09 PM  

**JSON:**

 "results": [
    {
        "id": 62,
        "projectname": "Test1 ||",
        "columns": [
            {
                "id": 797,
                "text": "Todays Date" 
            },
            {
                "id": 798,
                "text": "Yesterdays Date",
            },
            {
                "id": 818,
                "text": "Current Date"
            },
            {
                "id": 816,
                "text": "Close Date",
            },
            {
                "id": 815,
                "text": "Submit Date",
            }
        ],
        "rows": [
            {
                "TodaysDate": "4/13/13 8:29:09 PM",
                "YesterdaysDate": "4/12/13 1:20:09 PM",
                "CurrentDate": "5/13/13 4:29:09 PM",
                "CLOSEDATE": "5/13/13 4:29:09 PM",
            },
            {
                "TodaysDate": "3/13/13 1:05:09 PM",
                "YesterdaysDate": "3/12/13 2:29:09 PM",
                "CurrentDate": "5/13/13 4:29:09 PM",
                "CLOSEDATE": "5/13/13 4:29:09 PM",
            },
            {
                "TodaysDate": "2/1/13 9:56:09 PM",
                "YesterdaysDate": "5/13/13 2:20:09 PM",
                "CurrentDate": "5/13/13 4:29:09 PM",
                "CLOSEDATE": "5/13/13 4:29:09 PM",
            },

        }

       }
    }
 }

Answer 1

You need to nest some ng-repeats and you're done. 您需要嵌套一些ng-repeats，然后完成。 Here's a plunker for your example: 这是您的示例的一个小问题：

index.html 的index.html

<html ng-app="myApp">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <table border="1">
       <thead>
         <tr>
          <th ng-repeat="col in results.columns">
            {{col.text}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in results.rows">
          <td ng-repeat="cell in row">
            {{cell}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

script.js 的script.js

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {

  var results = [{
    "id": 62,
    "projectname": "Test1 ||",
    "columns": [{
      "id": 797,
      "text": "Todays Date"
    }, {
      "id": 798,
      "text": "Yesterdays Date",
    }, {
      "id": 818,
      "text": "Current Date"
    }, {
      "id": 816,
      "text": "Close Date",
    }, {
      "id": 815,
      /* This column doesn't have data*/
      "text": "Submit Date",
    }],
    "rows": [{
      "TodaysDate": "4/13/13 8:29:09 PM",
      "YesterdaysDate": "4/12/13 1:20:09 PM",
      "CurrentDate": "5/13/13 4:29:09 PM",
      "CLOSEDATE": "5/13/13 4:29:09 PM",
    }, {
      "TodaysDate": "3/13/13 1:05:09 PM",
      "YesterdaysDate": "3/12/13 2:29:09 PM",
      "CurrentDate": "5/13/13 4:29:09 PM",
      "CLOSEDATE": "5/13/13 4:29:09 PM",
    }, {
      "TodaysDate": "2/1/13 9:56:09 PM",
      "YesterdaysDate": "5/13/13 2:20:09 PM",
      "CurrentDate": "5/13/13 4:29:09 PM",
      "CLOSEDATE": "5/13/13 4:29:09 PM",
    }, ]
  }];

  $scope.results = results[0];
});

http://plnkr.co/edit/GRvyzuz11dWiALtNQVwL?p=preview http://plnkr.co/edit/GRvyzuz11dWiALtNQVwL?p=preview

使用AngularJS的JSON输出

问题描述

1 个解决方案

解决方案1
0 2015-10-20 22:37:32

使用AngularJS的JSON输出

问题描述

1 个解决方案

解决方案1 0 2015-10-20 22:37:32

解决方案1
0 2015-10-20 22:37:32