使用AngularJS JSON輸出

我想輸出JSON以表格格式使用AngularJS在哪裏我得到列和行，但不知道從哪裏開始。我工作了一點，但無法到達任何地方。任何人都可以幫助我輸出JSON。請在下面的表格中查找輸出結果應該看起來像和JSON使用AngularJS 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", 
      }, 

     } 

     } 
    } 
}

來源

2015-10-20 user2501165

你有任何HTML去與數據集？爲什麼你的JSON只有一個元素的對象數組？ – Claies

你試過了什麼？ – Anfelipe

您需要嵌套一些ng重複，你就完成了。這裏是爲您例如plunker：

的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=preview

來源

2015-10-20 22:37:32 Anfelipe

使用AngularJS JSON輸出

回答

相關問題