I'm using Angularjs to repeat some elements in my HTML. Angular repeats the divs correctly, but when trying to repeat an specific div it just doesn't work. Explanation after the code:
<tr ng-repeat="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
<tr class="spacer"></tr>
</tr>
Angular repeats everything inside <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> BUT the last div <tr class="spacer"></tr>
If I comment the spacer the ng-repeat it does repeat the spacer, but if I don't the spacer only shows once at the end of the repeated code.
<!-- <tr class="spacer"></tr> -->
I tried changing the HTML Tag for spacer but I'm having the same issue.
As you can see in the Chrome's debugger, the spacer shows after the repeated code:
If you really want to include your spacer in your iteration there is another option called ng-repeat-start and ng-repeat-end
Something like the following should work
<tr ng-repeat-start="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>
You can find this exact information here on their documentation page.
<tr> inside <tr> is not valid html. You must include ng-class="{'spacer': someCondition}"
<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>
Try to add condition ng-if="$last" to your spacer
Related
Hi I am using Angular8 and initially, it must be bound in a table all values and when click on edit, that particular row should be editable and one row at a time can be edited, I have attached the demo. And here I have added only one array data for demo purposes, but I need to bind multiple years so I tried with reactive forms to add input field and td based on click but couldn't bind values. So here in my case, I need to edit one row at a time.
HTML:
<ng-container *ngFor="let contact of yearManagement">
<tr>
<td></td>
<td class="text-capitalize">{{contact.policyTypeName}}</td>
<td>{{contact.quotes}}</td>
<td>{{contact.policyCT}}</td>
<td>{{contact.writtenPremium }}</td>
<td class="width125">
<button class="btn btn-outline-primary btn-table ml-1" title="Edit">Edit</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
(click)="deleteCommitment(contact)">Delete</button>
</td>
</tr>
</ng-container>
Demo
Try with the following changes in html
<ng-container *ngFor="let contact of yearManagement">
<tr>
<td></td>
<td class="text-capitalize">
<ng-container *ngIf="editableRow !== contact.id; else newDeb">
{{contact.policyTypeName}}
</ng-container>
<ng-template #newDeb>
<input [(ngModel)]="contact.policyTypeName" />
</ng-template>
</td>
<td>{{contact.quotes}}</td>
<td>{{contact.policyCT}}</td>
<td>{{contact.writtenPremium }}</td>
<td class="width125">
<button class="btn btn-outline-primary btn-table ml-1" title="Edit"
(click)="editableRow = contact.id">Edit</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
(click)="deleteCommitment(contact)">Delete</button>
</td>
</tr>
</ng-container>
And in typescript
export class AppComponent {
editableRow = 0;
So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!
It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>
You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome
Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
I'm trying to figure out how to add a textbox to the last column of each row on a site. My Java/JQuery experience is quite limited and can't really wrap my head around this one.
I've pasted the code for one of the tables below.
I've tried getElementsByClassName, but not sure what to call.
Any help would be much appreciated!
<tbody>
<tr id="g_1_hKWlkSGU" class="tr-first stage-scheduled" style="cursor: pointer;" title="">
<td class="cell_ib icons left">
<span class="icons left">
<span class="tomyga icon0">
</span>
</span>
<div data-context="g:g_1_hKWlkSGU" class="mg_dropdown">
<div class="mg_dropdown_wrapper">
<span class="mg_dropdown_selected">-</span><span class="down_arrow">
</span>
</div>
</div>
</td>
<td class="cell_ad time">19:45</td>
<td class="cell_aa timer">
<span> </span>
</td>
<td class="cell_ab team-home"><span class="padr">Barcelona</span>
</td>
<td class="cell_sa score">-</td>
<td class="cell_ac team-away">
<span class="padl">Celtic</span>
</td>
<td class="cell_sb part-top">
<span class="icons">
<span class="live-centre">
</span>
</span>
</td>
<td class="cell_ia icons">
<span class="icons">
<span class="tv icon1">
</span>
</span>
</td>
<td class="cell_oq comparison" title="">
<span class="icons" title="">
<span class="slive icon0 xxx" title="This match will be available for LIVE betting!">
</span>
</span>
</td>
</tr>
</tbody>
I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle
I'm using find as that in order to select inner
$(".pauseAnomaly[data-id=78]").parent().parent().prev().find(".pauseaction").each(function (i) {
pauseActionUI($(this).data("id"));
});
I want to launch .pauseAction on each .pauseAction found in $(".pauseAnomaly[data-id=78]").parent().parent().prev().
Here, it works perfect when there is single .pauseaction but nothing when there is multiple .pauseaction, why? and how resolve this?
In other words
When I do
$(".pauseAnomaly[data-id=35]").parent().parent().prev().find(".pauseaction").each(function (i) {
alert($(this).data("id"));
});
where there is one .pauseaction, it returns one id, but when there is multiple .pauseaction, it returns me [], but I wound like to see all id's and apply funcito to all of them, why and how?
I think find() only returns one element, so if it's true, how can I make change in order to have all elemetns?
Here is the code when I $(".pauseAnomaly[data-id=14]").parent().parent().prev()
<table>
<tr>
<td style="border-top-width:0;padding-top:0;padding-left:0;padding-right:0;padding-bottom:0;">
<table class="table table-striped" style="margin-bottom:0;">
<tbody>
<tr class="actionRow actionRow" data-id="9">
<td><span class="glyphicon spaceAfterIcon vorx late glyphicon-remove red" data-id="9"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="9">03/04/2015</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Reparer le chauffage (date de fin plann. depassée)" data-actionid="9" data-id="9"></span> | <span class="glyphicon glyphicon-pause red pauseAction" data-id="9"></span> <span class="closeActionButtons" data-id="9">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="9"></span>/ <span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="9"></span></span></td>
</tr>
<tr class="actionRow desactivatedColor actionRow" data-id="10">
<td><span class="glyphicon spaceAfterIcon vorx late" data-id="10"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="10">03/04/2015</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Installer un thermostat pour réguler le chauffage" data-actionid="10" data-id="10"></span> | <span class=" glyphicon glyphicon-play red playAction" data-id="10"></span> <span class="closeActionButtons" data-id="10" style="display:none;">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="10"></span>/<span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="10"></span></span></td>
</tr>
<tr class="actionRow actionRow" data-id="13">
<td><span class="glyphicon spaceAfterIcon vorx late glyphicon-remove red" data-id="13"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="13">27/03/2012</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Action closed" data-actionid="13" data-id="13"></span> | <span class=" glyphicon glyphicon-pause red pauseAction" data-id="13"></span> <span class="closeActionButtons" data-id="13">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="13"></span>/ <span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="13"></span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
The problem is with the case of the selector as it needs to be pauseAction as opposed to pauseaction. Below is a demo that clarifies it.
$("table").find(".pauseAction").each(function (i) {
alert($(this).data("id"));
});
So, your code would become (provided .pauseAnomaly[data-id=14] selector exists!):
$(".pauseAnomaly[data-id=14]").parent().parent().prev().find(".pauseAction").each(function (i) {
alert($(this).data("id"));
});
Demo#Fiddle
Could you try in your each function:
$(this)[i].data('id')
If that doesnt work try:
$($(this)[i]).data('id')
What I've done is select the element that you found and as it is an array you are selecting the specific index in the loop
For example if i = 2 in the loop the selector would look like:
$(this)[2].data('id')
which would return the 3 element in that array