使用AngularJS输出JSON

JSON output using AngularJS

本文关键字：JSON 输出 AngularJS 使用      更新时间：2023-09-26

我试图使用AngularJS在表格格式中输出JSON，我得到列和行，但不知道从哪里开始。我努力了一点，但毫无进展。谁能帮我输出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",
            },
        }
       }
    }
 }

您需要嵌套一些ng-repeat，这样就完成了。下面是你的例子:

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 

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 =预览

相关文章：