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">
Related
I am trying to display information inside a table using a button to show and hide the data in each row using the row's id, but since I have 2 ng-repeat, the first loop is completed before the second and therefore all the data is displayed in the same row : here is my code :
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>Projet</th>
<th>Responsable Apitech</th>
<th>Temps Passé</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="p in projetsListe" >
<td>
<button class="btn btn-xs" ng-click="expanded = !expanded" expand data-toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td>{{p.NomProjet}}</td>
<td>{{p.ResponsableApitech}}</td>
<td>Temps Passé</td>
</tr>
<tr ng-repeat-end ng-show="expanded">
<td></td>
<td colspan="6">
<table class="table table-condensed table-bordered">
<thead>
<th></th>
<th>Tache</th>
<th>Collaborateur</th>
<th>Date</th>
<th>Temps Passé</th>
</thead>
<tbody>
<tr ng-repeat= "ft in ftListesorted" ng-show="expanded" class="collapse {{ft.IdProjet}}">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>{{ft.NomTache}}</td>
<td>{{ft.NomCollaborateur}}</td>
<td>{{ft.Datefeuillestemps | date : 'dd/MM/yyyy' }}</td>
<td>{{ft.TempsPasse}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This is what im trying to achieve : http://embed.plnkr.co/qqNGSbw6oLUZbKqVQVpG/?show=preview
In my case :
This is what I get instead :
If you noticed in the second image get the information of the first and the second row while i want the information of each row seperatly.
Here is a plunker with an example of the problem : https://plnkr.co/edit/pPcPipLK0TltnOC60SSf
create expanded property for each row. Change this lines
<button class="btn btn-xs" ng-click="p.expanded = !p.expanded" expand data-
toggle="collapse" id="{{p.IdProjet}}" data-target=".{{p.IdProjet}}">
and
<tr ng-repeat-end ng-show="p.expanded">
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 have a Asp.net MVC project with AngularJs as javascript framework.
I am using smart-table angular plugin for my table\grid requirement. Everything works fine but the pager is not showing up at all on page.
Below is my html code:
<div data-ng-controller="gridcontroller" class="row">
<label>Grid demo</label>
<table data-st-table="griddata" class="table striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="row in griddata">
<td data-ng-bind='row.firstName'></td>
<td data-ng-bind='row.lastName'></td>
<td data-ng-bind='row.birthDate'></td>
<td data-ng-bind='row.balance'></td>
<td data-ng-bind='row.email'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-template="~/Scripts/Angular/Plugins/pagination.html" st-pagination=""
st-items-by-page="10">
</div>
</td>
</tr>
</tfoot>
</table>
Pagination.html markup is as below:
<div class="pagination" ng-if="pages.length >= 2">
<ul class="pagination">
<li ng-if="currentPage > 1">
<a ng-click="selectPage(1)"><<</a>
</li>
<li ng-if="currentPage > 1">
<a ng-click="selectPage(currentPage-1)"><</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
<a ng-click="selectPage(page)">{{page}}</a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(currentPage+1)">></a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(numPages)">>></a>
</li>
</ul>
When I run the site I see the grid with all records (60 in my case) and the pager markup is shown as below:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-template="/Scripts/Angular/Plugins/pagination.html" st-pagination="" st-items-by-page="itemsByPage" class="ng-isolate-scope">
<!-- ngIf: pages.length >= 2 -->
</div>
</td>
</tr>
</tfoot>
I did every step as mentioned on the site but can't make the pager work.
Any help is deeply appreciated.
Hi if you are using server side pagination then you need to tell smart table about the number of pages, so that it will get the clue about the pages it is going to display and bind its event upon it
tablestate.pagination.numberOfPages = response.totalPages;
you have to set the total number of pages from the response to the tablestate's pagination object numberOfPages property.
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';
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.