<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="table in tables">
<td>{{$index+1}}</td>
<td ng-repeat="header in headers">{{$parent.table.header}}</td>
</tr>
</tbody>
</table>
I have a json array retrieved from a server. First ng-repeat: 'headers' contain keys in that json array which i extracted. It works fine in all cases.
Second ng-repeat: 'tables' contain the json array received. What i am trying to do is for each element of json array, find data by providing key values.
here is my multiple ng-repeat code. This doesn't work, no data is printed in the table but if i change {{$parent.table.header}} to {{$parent.table}} or {{header}} i can see data in the table.
The problem is {{$parent.table.header}} how can i do it correctly ?
Try to use $parent.table[header] - because header is already a string.
Related
I need a table which I can iterate data of my table over its columns.
like
<table>
<thead>
<tr colspan="2">کارکرد</tr>
<tr colspan="2">پرداخت</tr>
<tr colspan="2">کسور</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
please help me out here
The issue is I should iterate each column of data separately, and I have no idea how to do that.
Working on some array projects but Stuck on point where *ngFor did't accept dynamic value provided by another *ngFor.
<table border="2">
<tr>
<th rowspan="2">Subject</th>
<th colspan="4" *ngFor='#category of json.category_name'>{{category}}</th>
<th colspan="4">Overall</th>
</tr>
<tr>
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa.category">{{fa}}</th> //Not Working
</div>
</tr>
</table>
here in the commented line i want to provide json.total_fa.category where this category is coming from another *ngFor which is declared just above. but getting no result it seems angular try to find out json.total_fa.category itself which is not present.
but i want to load json.total_fa_term1 (which is first index from the category). how can i achive this.
Can i use more than one *ngFor on same HTML component ?
sometimes *ngFor and *ngIf is not working properly while embed on the same element why ?
here is my workground demo
You need to use .total_fa[category] instead of .total_fa.category otherwise you will try to access a property with name category:
<div *ngFor="#category of json.category_name">
<th *ngFor="#fa of json.total_fa[category]">{{fa}}</th>
</div>
See the updated plunkr: http://plnkr.co/edit/v08AdzNsR4GHMlZWQNsR?p=preview.
I have three tables which are using using different variables for displaying the data.
Basic structure of the table
<table>
<thead>
<tr>
<th ng-repeat="var in array2"><i ng-show="array3[$index]=0"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="var in variable">
<td ng-repeat="var1 in var">{{var1.position}}</td>
</tr>
</tbody>
</table>
All the three tables are using different arrays for variable, array2 and array3. Is there any way I don't have to write the code thrice and I can loop the code for three tables.
Please suggest changes in data structures only when there are no other possible HTML solution to change it.
You need to check for directives, for instance <my-table-directive datas="array1"></my-table-directive>
This directive will hold the logic and templaces and you'll pass a variable to define the content.
I like bootstrap and I am trying to add a bootstrap sortable & searchable table(s) to my django site. like on http://wenzhixin.net.cn/
the example code looks fairly strait forward. except that i cannot figure out the very first part data-url="data1.json"
<table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
I am able to create Json data bassed on this Stackoverflow Creating a JSON response using Django and Python but I cannot figure out how to format it as a url that django/table can access.
I have an angular app in which i am creating a table based on the json as follows:
<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>
Here the table creates the headings as well as the content from a json. But the result of this code is a table with sorted headings. Is there a way to keep the order the same as in the json file?
Your headers are in an object. JavaScript objects do not guarantee property order. See this question. To preserve order, you have to use an array in your JSON file.