Angularjs dynamic table
Question
I have following json string to generate report in angularjs:
{
"result": [{name:"AUS ba",date":"02-01-2014", "result": "pass","time" : "morning","reason":"ok"}],
"result": [{name:"SA ba",date":"02-01-2014", "result": "pass","time" : "afternoon","reason":"ok"}],
"result": [{name: "NZ ba",{"date":"02-01-2014", "result": "fail","time" : "morning","reason":"ok"}],
"result": [{name:"AUS ba","date":"03-01-2014", "result": "pass","time" : "morning","reason":"ok"}],
"result": [{name:"SA ba",date":"03-01-2014", "result": "fail","time" : "morning","reason":"batch failed"}],
"result": [{name: "NZ ba",date": "03-01-2014", "result": "fail","time" : "morning","reason":"batch error"}]
}
Currently I am generating table in simple format using ng-repeat:
Name Date Result Reason Time
AU ba 02-01-2014 PASS Ok Morning
AU ba 03-01-2014 ...
AU ba 04-01-2014 ...
...........
...........
Now I want to dynamically create table like this
02-01-2014 02-01-2014 02-01-2014 02-01-2014 03-01-2014 03-01-2014
Morning Morning Afternoon Afternoon Morning Morning
AU ba Pass[Result] ok[Reason] Fail Ok Pass ok
SA ba Fail batch failed
Could somebody please help me with this?
3 answers
solution1
0 2014-02-08 18:05:22
You could make a table with one row and then ng-repeat the columns in that row. In each column you can then make a table with 4 rows and one column:
http://plnkr.co/edit/3xvdGC?p=preview (I reformatted your JSON data to be able to work with it)
However, this will give problems if the text of some table cells require multiple lines. To solve that you could just use multiple ng-repeat statements:
solution2
0 2014-02-08 18:12:02
Write your html like this:
<body>
<table ng-controller="MyCtrl">
<tr>
<td ng-repeat="r in result">
<table border=1>
<tr>
<td>
{{r.date}}
</td>
</tr>
<tr>
<td>
{{r.result}}
</td>
</tr>
<tr>
<td>
{{r.time}}
</td>
</tr>
<tr>
<td>
{{r.reason}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
You will find a plunker here
Note that i reformated your json, dropped some data and left all the fancy formating to you.
solution3
0 2014-02-08 18:20:09
You can just use ng-repeat multiple times for each label: http://jsfiddle.net/4HHc2/2/
After reformatting your json string as an array of results, you can just call each item as follows:
<td ng-repeat="d in data">{{d.date}}</td>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.