AngularJs table in double ng-repeat - angularjs

I am trying to visualize an json-object in a table like this :
<div ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</div>
If I do that I will see only a white screen.
This way works, but I need the data in an table.
<div ng-repeat="item in data">
<ul ng-repeat="i in item">
<div>
{{ i.id }}
{{ i.ip }}
</div>
</ul>
</div>
Do you know a possible solution with a table?


try this
<table>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>


I found the mistake! The first ng-repeat must be in the table statement.
<table class="table table-striped">
<thead>
<tr>
<td>id</td>
<td >ip</td>
</tr>
</thead>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>

Related

Sorting columns with smart table

I am trying to sort columns by clicking on the header item using smart table. But it does not work for me. What am I doing wrong?
This is my HTML:
<div class="pane pane--table1" st-table="data.content" st-safe-src="data">
<div class="pane-hScroll">
<table>
<thead>
<tr>
<th ng-repeat="item in data.header" st-sort="{{item}}">{{item}}</th>
</tr>
</thead>
</table>
<div class="pane-vScroll">
<table>
<tbody>
<div ng-include="'templates/includes/ajax_spinner.html'"></div>
<tr ng-repeat="value in data.content">
<td ng-repeat="(key, val) in value[0]">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Assign value after ng-if

I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".

It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.

Unique DT Instance with Angular DataTables

I have Datatable in ng-repeat and want to be able to generate a unique dt-instance for all datatables in UI. This way I can have a unique instance of each table. Here is my template file with what is going on
<li ng-repeat="batch in vm.batches">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="**I WANT TO BE ABLE TO SET THIS TO SOMETHING UNIQUE**">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in batch.PricingItems">
<td>
<a href="javascript:;" ng-click="childInfo(item, batch.dtInstance, $event)" title="Click to view more">
<i class="glyphicon glyphicon-plus-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</li>

You can make it unique by passing the $index value of the ng-repeat.
<li ng-repeat="batch in vm.batches track by $index">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="$index">

How to use ng-repeat in expandable table rows

I'm using bootstrap to accomplish expanding table rows.
The format for doing this is:
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>one</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
How can I do ng-repeat over the entire block listed above?
I tried doing
<tr ng-repeat="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
<td>one</td>
</tr>
<tr ng-repeat="x in colors track by $index">
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1{{$index}}">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
But this way the rows don't expand right under the one that is clicked. Also, I'm having to do two loops. How can I do this all in one loop?

To iterate over both <tr> tags, use ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
<td>one</td>
</tr>
<tr ng-repeat-end>
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1{{$index}}">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
A good guide to ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat

ng-repeat-start and ng-repeat-end work great!
I complemented with angular code for hide/show accordion instead of data-toggle/data target to toggle a css:
ng-repeat-start="customer in customers track by $index" ng-click="toggle = !toggle" ng-class="{'open' : toggle}"
where
$scope.toggle = 'open';

AngularJS ng-include finished

I'm loading a large amount of data using ng-include.
I'd like to know if there is a way to know when a template is "rendered", because sometimes it seems like it's been "frozen", because I want to do a "loading screen" or something.
Thx.
Here's the code
controller code:
$scope.layout = {
current: 'single-table.html'
};
$scope.layout.get = function() {
return $scope.layout.current;
};
templates:
main.html
<div class="btn-group">
<button ng-click="layout.current = 'single-table.html'">Single</button>
<button ng-click="layout.current = 'multiple-table.html'">Multiple</button>
</div>
<div ng-include="layout.get()"></div>
single-table.html
<table class="table table-bordered">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
multiple-table.html
<table class="table table-bordered" ng-repeat="record in records">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
EDIT
I'm using version 1.2.0
One solution (probably not the best) is doing this (no ng-include)
<table class="table table-bordered" ng-show="layout.current == 'single-table.html'">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered" ng-repeat="record in records" ng-show="layout.current == 'multiple-table.html'">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
I have only 20 records, but (is not in the code), each cells loads a custom directive depends on the data type (string, date, datetime, image...). This "solution" I think runs the same data twice (ng-show, not ng-if), but when a switch the layout mode there is no "lag".

You can use the onload hook on ng-include to update a variable when the include has finished rendering. If you set it to true on clicking your button, then revert it back to false in onload, you should be able to leverage it to temporarily display a loading screen.

Resources