I was trying to use ng-repeat to create a table, but I couldn't figure out how to get it to work. My best attempt was the below.
<table ng-repeat="j in [0,1,2,3,4,5,6,7]">
<tr>
<th>
Header {{j+1}}
</th>
</tr>
<tr ng-repeat="i in [0,1,2,3,4,5,6,7]">
<td>
{{i+1}} , {{j+1}}
</td>
</tr>
</table>
any ideas?
So to begin with, the ng-repeat attribute is on the table, meaning that you are repeating this element as many times as there are entries in your array. Knowing that "tr" stands for the rows, and "td" for different sections in your rows.
You could try:
<table>
<tr><!--this is your header row -->
<th>
Header {{j+1}}<!-- this is a header section, you can repeat here or use it as a title -->
</th>
</tr>
<tr ng-repeat="j in [0,1,2,3,4,5,6,7]"><!-- repeat the rows -->
<td ng-repeat="i in [0,1,2,3,4,5,6,7]"><!-- repeat the sections -->
{{i+1}} , {{j+1}}<!-- here you can display i, j whatever else -->
</td>
</tr>
</table>
Related
I am working on a scenario where i am using nested ng-repeat to display the json values in html table.Attached the plunker plnkr.co/edit/qC6v8nOP4iFgjlxezTa1?p=preview.I am not able to see the last column values properly.
You have no problems with AngularJS, but with HTML, try this variant:
<table width="100%">
<thead>
<tr>
<th>Id:</th>
<th>Age:</th>
<th>Subjects:</th>
<th>Only Lecturer Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in student track by $index">
<td>{{x.id}}</td>
<td>{{x.age}}</td>
<td>{{x.subjects}}</td>
<td>
<span ng-repeat="j in x.subjects">
{{j.Lecturer}}
</span>
</td>
</tr>
</tbody>
</table>
I'm receiving a JSON list from server that could contain any number of properties of any name. I need to show that list on my page. Populating a table when you know the names of properties is easy, but for this one I'm totally lost. Any help would be appreciated.
You can do this,
HTML:
<table>
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
Here is a sample
I am having trouble trying to present data from an api. The data comes in a json response organized like this API from Guild Wars for character data
I made an angularJS request and used a series of nested ng-repeats to present the data, but the innermost loop , the inventory data , isn't being present properly. Only some of it is being iterated.
This is my code :
<table>
<tr ng-repeat="char in $ctrl.chars | orderBy:'-age'">
<td>
<table id="charTotal">
<ng-include src="'charBasic.html'"></ng-include>
<ng-include src="'charBags.html'"></ng-include>
</table>
</td>
</tr>
</table>
Forgot to include charBasic.html :
<tr>
<td>
<table id="charBasic" class="charBasic">
<tr>
<td>{{char.name}}</td>
<td>{{char.race}}</td>
<td>{{char.profession}}</td>
<td>{{char.level}}</td>
<td>{{char.deaths}}</td>
<td>
<table>
<tr ng-repeat="craft in char.crafting">
<td>{{craft.discipline}}</td>
<td>{{craft.rating}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
charBags.html :
<tr>
<td>
<table id="charBags" class="charBags" border="1">
<tr ng-repeat="bag in char.bags">
<td>{{bag.id}}</td>
<td>{{bag.size}}</td>
<td ng-repeat="inv in bag.inventory"><ng-if "{{inv}}">{{inv.id}}</ng-if></td>
</tr>
</table>
</td>
</tr>
As it is, not all inventory arrays are iterated, and the results vary each time
What would be the correct way to iterate this data ?
I found out the problem, it was a duplicate item issue :(
I "solved" it by using track-by $index option inside ng-repeat, which will bypass the problem of duplicate ids.
I have a problem when trying to format a table created with two arrays using ng-repeat. I have the two arrays; game.Teams[0].Scores and game.Teams[1].Scores, and the following html:
<table>
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in game.Teams[0].Scores">
<td>
{{score.ExtraPoints}}
</td>
<td>
????
</td>
</tr>
</table>
I want to loop over both lists and fill the second column with items from the second list. Is this achievable with ng-repeat, or will I have to merge the two and loop over a combined list?
Assuming both teams have the same amount of items
<table ng-init="scores = game.Teams[0].Scores.length > game.Teams[1].Scores.length ? game.Teams[0].Scores : game.Teams[1].Scores">
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in scores">
<td>
{{game.Teams[0].Scores[$index].ExtraPoints}}
</td>
<td>
{{game.Teams[1].Scores[$index].ExtraPoints}}
</td>
</tr>
</table>
Note: you can do that ngInit part in the controller, just showing how it can be done all in the view.
I am trying to add a second row (<tr>) in the code below for each event in events in the ng-repeat. However, it only adds a single row at the end, I need each new row (class="info") to be BETWEEN each of the other rows with the rel attribute.
The cell in the info row will be filled via ajax and toggled when the Details link is clicked, it will then be toggled again when the Close link is clicked (Details changes to Close). It will work similar to this fiddle: http://jsfiddle.net/Mrbaseball34/btwa7/
How would I do that in AngularJS?
<tbody id="events_tbody">
<tr ng-repeat="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>
You need to make use of the special ng-repeat-start and ng-repeat-end attributes (explained here):
<tbody id="events_tbody">
<tr ng-repeat-start="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr ng-repeat-end class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>