The following table row is typical.
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.subject}}</td>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
but, how to repeat two rows to each?
<tr ??>
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ??>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
If you're using AngularJS 1.2+, you can use ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="item in items">
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
See "Special repeat start and end points" in the ngRepeat docs.
Otherwise, you have to resort to some nasty tricks, like wrapping the trs in a tbody element and repeating that.
Related
I am learning Angular now and got stuck here. What I have tried is:
<tr ng-show="data in myData17.layouts | limitTo:2 | slice:1">
<td>{{data.name}}</td>
<td>{{data.cards[1].cardNo}}</td>
<td>{{data.cards[1].cardType}}</td>
<td>{{data.cards[1].ports[0].portNo}}</td>
<td>{{data.cards[1].ports[0].portName}}</td>
<td>{{data.cards[1].ports[0].portType}}</td>
<td>{{data.cards[1].ports[0].portspeed}}</td>
<td>{{data.cards[1].ports[0]["ds-scheduler-node-profile"]}}</td>
</tr>
where layouts is an array that has up to 10 elements in it but I want to access the data that is in index=1.
You use ng-repeat instead of ng-show for looping and use $index for accessing item.
<tr ng-repeat="data in myData17.layouts">
<td ng-show="$index==0">{{data.name}}</td>
<td ng-show="$index==0">{{data.cards[0].cardNo}}</td>
<td ng-show="$index==0">{{data.cards[0].cardType}}</td>
<td ng-show="$index==0">{{data.cards[0].ports[0].portNo}}</td>
<td ng-show="$index==0">{{data.cards[0].ports[0].portName}}</td>
<td ng-show="$index==0">{{data.cards[0].ports[0].portType}}</td>
<td ng-show="$index==0">{{data.cards[0].ports[0].portspeed}}</td>
<td ng-show="$index==0">{{data.cards[0].ports[0]["ds-scheduler-node-profile"]}}</td>
</tr>
I have an array json as follows
$scope.array =[{"id":"1","age":"3","name":"ab"},{"id":"2","age":"2","name":"ee"},{"id":"3","age":"1","name":"dd"}];
I need to show these data in a table using ng-if where if the age is 1 then that cell should have only data related to age = 1 etc. I used the following code.
<html>
<table>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</table>
</html>
But currently all the values are shown in the first column one after the other. I can't figure out the reason.
Don't forget to close your tr tag with an end tag. Something like this:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td ng-if="record.age == '1'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '2'">{{record.id}} {{record.name}}</td>
<td ng-if="record.age == '3'">{{record.id}} {{record.name}}</td>
</tr>
</tr>
However, in your case, you won't gain nothing by using ng-if. You will get the same output if you use the following code:
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<tr ng-repeat="record in array">
<td>{{record.id}} {{record.name}}</td>
</tr>
</tr>
If you really want to use a ng-if, the way that you're doing is fine.
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>
Below object should generate table rows for parent and child objects under one table(as siblings). how it can be, I used ng-repeat-start but no use. I need it for equal alignments.
[
{'name':'parent1','children':[{'name':'child1'},{'name':'child2'}]},
{'name':'parent2','children':[{'name':'child1'},{'name':'child2'}]}
......
]
<table>
<tr ng-repeat="parent in obj">
<td>{{parent.name}}</td>
</tr>
<tr ng-repeat="child in parent.children">
<td>{{child.name}}</td>
</tr>
...........
Table should generate like below:
<table>
<tr>
<td>Parent1</td>
</tr>
<tr>
<td>child1</td>
</tr>
<tr>
<td>child2</td>
</tr>
<tr>
<td>Parent2</td>
</tr>
<tr>
<td>child1</td>
</tr>
<tr>
<td>child2</td>
</tr>
......
</table>
You may try
<table>
<tr ng-repeat-start="parent in obj">
<td>{{parent.name}}</td>
</tr>
<tr ng-repeat="child in parent.children">
<td>{{child.name}}</td>
</tr>
<tr ng-repeat-end="">
<tr/>
</table>
All is ok, because this code
<tr ng-repeat="child in parent.children">
<td>{{child.name}}</td>
</tr>
is out of this scope
<tr ng-repeat="parent in obj">
<td>{{parent.name}}</td>
</tr>
if you want to achieve what you want you can make a flat array like this
[
{'name':'parent1'},
{'name':'children1'},
...
...
]
and iterate over it
Hi I have a simple use case for ng-repeat-start and end and is working just fine, the problem appears when I want to add an inner ng-repeat.
Here is the my code
<tr ng-repeat-start="obj in rows" >
<td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="4">{{obj.description}}</td>
<tr>
The inner ng-repeat into td element is not working, I'm seeing the ngRepeat comment when I inspect the html source code, but the td elements are not being created.
<!-- ngRepeat: e in obj.row -->
My ugly workaround (given that I know the size of that vector) is:
<tr ng-repeat-start="obj in rows" >
<td>{{obj.row[0]}}</td>
<td>{{obj.row[1]}}</td>
<td>{{obj.row[2]}}</td>
<td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="4">{{obj.description}}</td>
<tr>
I am not sure whether you are using angular 1.1.6 or not since ng-repeat-start and ng-repeat-end are not available in 1.1.5 or 1.0.7 yet.
However, you don't actually have to use the new directives to achieve that. You can simply implement it like this for right now:
<table>
<tbody ng-repeat="obj in rows">
<tr ng-repeat="e in obj.row">
<td>{{e}}</td>
</tr>
<tr>
<td colspan="4">{{obj.description}}</td>
<tr>
</tbody>
</table>
You may use ng-repeat-start and ng-repeat-end to reimplement it when AngularJS 1.1.6 version is officially released.
Demo
I think it might be something wrong with your data structure. Using Angular 1.2.1 this works for me
<div ng-app="myApp" ng-controller="myCtrl">
<div class="h" ng-repeat-start="val in data">{{val.title}}</div>
<div ng-repeat="con in val.content">
{{con}}
</div>
<div class="b" ng-repeat-end>footer</div>
</div>
See jsFiddle
You should be able to use index-based iterations to bypass that:
<tr ng-repeat-start="obj in rows" >
<td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->