This is the extended question of AngularJS Multiple ng-repeats on single row of table
I'm trying to display a grandChilds collection. A for loop would look something like this.
foreach(var parent in list)
foreach (var child in parent)
foreach (var grandChild in child)
print(grandChild.item1)
print(grandChild.item2)
print(grandChild.item3)
Below is the general idea of what each row would look like.
<table>
<tr ng-repeat="parent in list">
ng-repeat="child in parent"
ng-repeat="grandChild in child"
<td>grandChild.item1</td>
<td>grandChild.item2</td>
<td>grandChild.item3</td>
</tr>
</table>
In the above referred question, TBODY is a good idea. But it will satisfy only two level (i.e., Parent and Child). How could I achieve my requirement (Parent, Child, Grandchild). Kindly assist me.
If I use nested TBODY, then its failed in the W3C Validation.
Kindly assist me how to achieve this
Use new table for each parent.
<table ng-repeat="parent in list">
<tbody>
<tr ng-repeat="child in parent">
<td ng-repeat="grandchild in child"></td>
</tr>
</tbody></table>
You could show a table(or other elements such as span\div) for grandchild collection within the table for list
<table>
<tr ng-repeat="parent in list">
<td ng-repeat="child in parent">
<table>
<tr ng-repeat="grandChild in child">
<td ng-repeat="item in grandChild">
{{item}}
<td>
</tr>
</table>
</td>
</tr></table>
EDIT: I have replaced it with div element. You can work on how to order the data in the display.
<table>
<tr ng-repeat="parent in list">
<td ng-repeat="child in parent">
<div ng-repeat="grandChild in child">
<div ng-repeat="item in grandChild">
{{item}}
</div>
</div>
</td>
</tr></table>
Related
Im missing something with my json file that I cant seem to figure out. I am creating a search by keyword with angular, and im using an external json file as the data. Currently, without filtering, It gives me all of the table cells, as opposed to just the ones I want.
The end result would be to have it only repeat over the subjects for each category. And for some reason its repeating over all of them for each subject, and only showing the ones i ask for. This leaves large gaps of empty cells.
html:
<div class="col-sm-12" style="padding:0px;padding-top:25px;margin-top:180px;">
<form>
<div class="form-group" style="border-bottom:1px solid white;">
<input ng-model="searchText" type="text" class="form-control logon-input" id="username" placeholder="Search" autofocus>
</div>
</form>
</div>
<div class="col-sm-12" style="padding:0px;">
<table class="table">
<tr>
<th>CONTENT</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_1}}</td>
</tr>
<tr>
<th>SOCIAL MEDIA</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_2}}</td>
</tr>
<tr>
<th>SOCIAL MEDIA TRACKING</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_3}}</td>
</tr>
<tr>
<th>ENGAGEMENT</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_4}}</td>
</tr>
</table>
</div>
angular:
app.controller('search_ctrl', ['$scope','$http',
function($scope,$http) {
$http.get('js/data.json').then(function(response){
$scope.categories = response.data;
});
}]);
json:
[
{"subject_1":"Owned Content"},
{"subject_1":"Earned Content"},
{"subject_2":"Social Media Platforms"},
{"subject_2":"Facebook"},
{"subject_2":"Instagram"},
{"subject_2":"Snapchat"},
{"subject_2":"Twitter"},
{"subject_2":"Youtube"},
{"subject_2":"Radarly By Linkinfluence"},
{"subject_3":"Impressions"},
{"subject_3":"Owned Impressions"},
{"subject_3":"Earned Impressions"},
{"subject_3":"Reach"},
{"subject_3":"Owned Reach"},
{"subject_3":"Earned Reach"},
{"subject_4":"Engagement Actions"},
{"subject_4":"Engagement Rate"}
]
Angular is working fine in its way you need to change your code something like
from
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_4}}</td>
</tr>
to
<tr ng-repeat="item in categories | filter:searchText" ng-if="item.subject_4">
<td>{{item.subject_4}}</td>
</tr>
Working demo
I want to represent some data in several tables. But Angular 4 adds many new divs to it and also a new tbody that destroys my table.
Her the template:
<div *ngFor= "let table of qmc.simplificationTable; let myIndex = index">
<table class="table table-bordered col-md-4">
<thead>
<tr>
<th>Group</th>
<th>Vars</th>
<th>Benutzt</th>
</tr>
</thead>
<tbody>
<div *ngFor= "let group of table let groupIndex = index">
<div *ngFor= "let primeImplicant of group">
<tr>
<td>
{{groupIndex}}
</td>
<td>
{{primeImplicant.toString()}}
</td>
<td>
{{primeImplicant._usedForCombination}}
</td>
</tr>
</div>
</div>
</tbody>
</table>
</div>
this is the html result:
https://pastebin.com/z5UneyMf
You can see that angular4 adds a new tbody element to every
<tr>
These tbodies and the new divs destroies my table.
How can I solve this?
Just replace
<div *ngFor
with
<ng-container *ngFor
Thanks yurzui (idea by yurzui in the comments)
I have a table which is displaying nested ng-repeat values. The HTML looks like this.
<table class="table">
<thead class="bgThead">
<tr>
<th>Environment</th>
<th>Configurations</th>
<th>Servers</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
<td>{{environment.Environment}}</td>
<td ng-repeat="servertypeinfo in environment.ServerTypeInfo">{{servertypeinfo.Type}}</td>
<td ng-repeat="servertypeinfo in environment.ServerTypeInfo">
{{servertypeinfo.ServerConfigInfo.length}}
<td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
</td>
</tr>
</tbody>
</table>
Now, when there are multiple values in child ng-repeat, the TDs are getting repeated, instead I want the whole row to be repeated, with the same values, except the new children value. Same goes with further nested ng-repeats. I made a plunk which shows what I am aiming for.
http://plnkr.co/edit/vLw6MCO8NGoFYxaCKeJ0?p=preview
Example without table, may not be what you are looking for
<div class="form-group" ng-repeat="environment in serverList.environments track by $index">
<div class="col-md-4">
<span ng-bind="environment.environment"></span>
</div>
<div class="col-md-8">
<ul class="list-group">
<li id="{{$index}}" ng-repeat="servertypeinfo in environment.serverTypeInfo track by $index">
Server Type: <span style="font-size: 16px;" class="no-margin" ng-bind="servertypeinfo.type">{{servertypeinfo.serverConfigInfo.length}}</span>
<p class="no-margin" ng-repeat="server in servertypeinfo.serverConfigInfo">
Server Name: {{server.serverName}}
</p>
</li>
</ul>
</div>
</div>
use the format like this
<tbody>
<tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
<td>
<table>
<tr ng-repeat="servertypeinfo in environment.ServerTypeInfo">
<td>{{environment.Environment}}</td>
<td>{{servertypeinfo.Type}}</td>
<td>
{{servertypeinfo.ServerConfigInfo.length}}
<td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
I'm building a dynamic table using angular2 using *ngFor as below, but I'm not able to see data. I'm not sure {{x[col]}} is correct, any idea?
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
You need to traverse each row in the inner loop.
Try:
<tr *ngFor="let rows of exportList">
<td *ngFor="let col of rows">
{{col}}
</td>
</tr>
<tr *ngFor="let x of exportList">
<td *ngFor="let col of x">
{{col}}
</td>
</tr>
you simply need to replace cols with x. exportList contains numbers of object.so in x you will get one object in each loop.By using object,you can fetch each field.
I need tree view control it should just appear as below:
http://plnkr.co/edit/JAIyolmqPqO9KsynSiZp?p=preview
+Parent
child
+Parent
child
child
child
child
+Parent
child
child
child
child
child
child
child
I just need simple tree as shown above, just need collapse- expand features and single level.
using angular 1.6 and bootstrap.
My collection data is - "List of Tasks" and each task has - "List Of Items"
how I could bind this and achieve above tree.
went though other links, but it seems complex with more features
please suggest any option.
Since you need a single level, you can use html table and 2 ng-repeats 1 for tasks and the other for child tasks. You can also also add a buttons to show/hide children.
<table class="table table-hover">
<thead>
<tr>
<td><b>ID</b></td>
<td><b>Task</b></td>
<td></td>
</tr>
</thead>
<tbody ng-repeat="task in ListOfTasks" ng-init="task.showChildren = false">
<tr>
<td>
<span class="label label-success">{{$index+1}}</span>
<span>
<a class="label label-danger" ng-show="!post.showChildren" ng-click="task.showChildren = true">+</a>
<a class="label label-primary" ng-show="post.showChildren" ng-click="task.showChildren = false">-</a>
</span>
</td>
<td>
{{task.TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
<tr ng-show="task.showChildren">
<td>
<div class="row">
<div class="col-sm-offset-1">
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td><b>Child Task</b></td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="childTasks in task.CHILD_TASKS">
<td class="col-sm-1">
<span class="label label-success">{{ $index + 1 }}</span>
</td>
<td>
{{childTasks.CHILD_TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
The table would look like
Also if you don't wont to get all the data at start, you may getchildren on expand click