ng-repeat and collapse table - angularjs

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">

Related

ng-repeat ($last) element with ng-if

var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>

Edit function not working after sort the data in angular js datatable

I have a table on html page and this table have 15 records. each column have sorting functionality.
There is a edit button on each row to edit row value in separate tab, its working fine before sorting of data.
Means if you have clicked on table's column than edit function is not called.
`<table id="tbl" class="table table-striped table-bordered"
datatable="ng" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Status</th>
<th>Notes</th>
<th>Description</th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in entities">
<td>{{e.name}}</td>
<td>{{e.code}}</td>
<td>{{getStatus(e.status)}}</td>
<td>{{e.notes}}</td>
<td>{{e.description}}</td>
<td align="center">
<span class="glyphicon glyphicon-pencil" />
<span style="color: #ddd;">|</span>
<span class="glyphicon glyphicon-trash" />
</td>
</tr>
</tbody>
</table>
And controller code as below :
$scope.edit = function (entity) {
alert('name');
$scope.entity = entity;
$scope.activate('view');
};
This function named as edit called until we not click on header of data table.
please suggests what is issue.. thanks in advance

How to display extended offer below specific table row?

I have this table.I have details on every row and my idea is when user click on that details to expend another row below that row but problem is that it always expand at the bottom of page.I need to expand below specific row where i click.Any suggestion? This is my html for that table :
<div class="table-layout clean-table">
<table class="table responsive-table">
<thead>
<tr>
<th>#Translator.Translate("STATUS")</th>
<th>#Translator.Translate("ID_TICKET_NUMBER")</th>
<th>#Translator.Translate("TICKET_TIME")</th>
<th>#Translator.Translate("PAYIN_AMOUNT")</th>
<th>#Translator.Translate("PAYOUT_AMOUNT")</th>
<th>#Translator.Translate("TICKET_DETAIL")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tickets in GetAllTickets">
<th><img ng-src="~/Content/img/Icons/{{tickets.Status | lowercase}}.png" /></th>
<th>{{tickets.Pin}}</th>
<th>{{tickets.TimeCreated | date: 'dd.MM.yyyy - hh:mm:ss'}}</th>
<th>{{tickets.PayIn}}</th>
<th>{{tickets.PayoutAmount}}</th>
<th><button class="details" ng-click="toggleExpandOffer($event);PinTicketSearch(tickets.Pin)"></button></th>
</tr>
<!--extended-->
<tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">
<th colspan="14">
<div ng-slide-down="isExpanded" duration="0.3" lazy-render>
<table class="offer-table-extended">
<tbody>
<tr>
<td>
<table>
<tr>
<td class="popup-text">#Translator.Translate("DATE"):</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Date : TopTicket.TimeCreated }} {{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Time : '' }}</td>
</tr>
<tr>
<td class="popup-text">
#Translator.Translate("GAME_TYPE"):
</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.GameType : TopTicket.GameType }}</td>
</tr>
</table>
</td>
</tr>
<div ng-if="TicketDetail.BettingSlipResult.TicketHolder.BingoBets.length >= 1">
<table class="ticket-table" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="text-center">#Translator.Translate("PICK")</th>
<th class="text-center">#Translator.Translate("ROUND_NUMBER")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in TicketDetail.BettingSlipResult.TicketHolder.BingoBets">
<td>{{a.Pick}}</td>
<td>{{a.RoundNumber}}</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
</div>
You can move ng-repeat to the tbody element instead of the tr element:
<tbody ng-repeat="tickets in GetAllTickets">
There will be multiple tbody elements but this is valid html. Since there will be multiple extended <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}"> instead of the one now, you can update that to reference tickets which is now in it's scope.

Bootstrap collapse close other on click

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.

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