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';
Related
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>
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.
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">
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>
I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.