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
Related
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
I want to fetch the data inside table but not getting any data.
Code is here--
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr>
<th><b>Project Name :</b></th>
<td ng-repeat="a in viewProjects">
{{a.id}}
</td>
{{viewProjects | json}}
</tr>
</tbody>
</table>
</div>
getting all data in viewProjects through json but unable to print it inside table row n each function of controller services and models working perfactly except this.
Please help me to get this issue.
You can use <ng-container ng-repeat=""></ng-container> for any angularJS condition without use any html element as below :
<table>
<tr>
<td>xyz</td>
<ng-container ng-repeat="a in myArray">
<td>{{a.id}}</td>
</ng-container>
</tr>
</table>
It looks like you should loop over tr instead of td in this case
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in viewProjects">
<td><b>Project Name :</b></td>
<td >
{{a.id}}
</td>
</tr>
</tbody>
</table>
</div>
I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
I'm trying to leverage "column" as a number and re-use it to define the "colspan" in the following "td".
<table>
<tr>
<td ng-repeat="column in columns">
{{column}}
</td>
<td colspan="column">
Something
</td>
</tr>
</table>
Not sure if thats what you meant but you can try the following:
<table>
<tr>
<td ng-repeat-start="column in columns">
{{column}}
</td>
<td ng-repeat-end colspan="{{column}}">
Something
</td>
</tr>
</table>