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;
Related
I am creating an application, where when clicking on the TR of my table, I need the line to be expanded to show the details.
However, when doing this, all the lines expand showing the data of the line that was clicked as in the result of the image below.
can you help me?
Image row expanded result:
https://imgur.com/a/NmCiV9Q
My code:
<tbody>
<ng-container *ngFor="let machine of machines">
<tr (click)="selectedMachine = machine">
<td>
<div class="user-info">
<div class="user-info__img">
<img src="./assets/img/cloud2.svg" alt="Usuário Img">
</div>
<div class="user-info__basic">
<h5 class="mb-0">{{machine.name}}</h5>
</div>
</div>
</td>
<td (click)="selectedMachine = machine">
<span class="active-circle bg-success"></span> Status
</td>
<td (click)="selectedMachine = machine">{{machine?.flavor?.disk}} GB</td>
<td (click)="selectedMachine = machine">{{machine?.flavor?.ram}} GB</td>
<td (click)="selectedMachine = machine">{{machine?.flavor?.vcpus}}x 2.8Mbps</td>
<td>
<button type="button" class="btn btn-primary mr-2" ngbTooltip="Open" (click)="openMachine(machine.id)"><i class="fas fa-external-link-alt"></i></button>
<button type="button" class="btn btn-primary mr-2" ngbTooltip="Detail"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger" ngbTooltip="Delete"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<ng-container *ngIf="selectedMachine">
<tr [ngbCollapse]="!selectedMachine">
<td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
<td>hello</td>
<td>{{selectedMachine?.flavor?.swap}}</td>
<td>{{selectedMachine?.flavor?.id}}</td>
<td>2</td>
<td>2</td>
</tr>
</ng-container>
</ng-container>
</tbody>
My Component:
export class MachinesComponent implements OnInit, OnDestroy {
constructor(private machine: MachineService) { }
public selectedMachine: any;
public machines: any[] = [];
}
<ng-container *ngIf="selectedMachine"> is placed inside the means <ng-container *ngFor="let machine of machines">. You can read it as for every machine show the selectedMachine container whenever item is selected. I feel that what you want is:
<tbody>
<ng-container *ngFor="let machine of machines">
...
<ng-container *ngIf="selectedMachine === machine">
<tr [ngbCollapse]="!selectedMachine">
<td (click)="selectedMachine = null" class="text-center"><i class="fa fa-angle-up"></i></td>
<td>hello</td>
<td>{{selectedMachine?.flavor?.swap}}</td>
<td>{{selectedMachine?.flavor?.id}}</td>
<td>2</td>
<td>2</td>
</tr>
</ng-container>
</ng-container>
</tbody>
it will show the details of the selected machine only next to this machine.
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
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 am trying to get id of a selected row in a table.
The rows are generated based on number of objects in foodList (JSP page).
JSP Code
<tbody>
<c:forEach items="${foodList}" var="det">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="${det.b_No}" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button></td>
<td><input type="text" class="form-control" value="${det.wt}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
JavaScript Code
$('#table_id').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0").attr("id"));
});
First alert is displaying the text as follows which is as expected,
<button id="1015" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button>
But for the second alert I am expecting the id (1015) but showing as "undefined".
the id is in button element so use :
alert($(this).find(".pt-0").find("button").attr("id"));
or simply direct access
alert($(this).find(".pt-0 button").attr("id"));
See below snippet :
$('#table').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0 button").attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="1508" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete">del</button></td>
</tr>
</table>
I'm using mustachesjs to add HTML code to my pages. I tried to add a row in a table using mustachejs but the td element or tr element are not in the html code.
Here is the mustachejs template :
<div id="tpl-general-tr-phone">
<tr>
<td>1</td>
<td>{{ number }}</td>
<td>{{ type }}</td>
<td>{{ published }}</td>
<td>
<button type="button" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
And the javascript code :
$.get( "mustache", function(template) {
var output = Mustache.render($(template).filter('#tpl-general-tr-phone').html(),
{
number : phonenumber,
type : phonetype,
published : 1
});
console.log(output);
$('.table-phones').append(output);
});
Anyone knows the solution to this problem ?
Thank you for your help
Apparently, the tr element are not well interpreted if they are not in a table element. What I did is to change my template like this :
<div id="tpl-general-tr-phone">
<table>
<tbody>
<tr>
<td>1</td>
<td>{{ number }}</td>
<td>{{ type }}</td>
<td>{{ published }}</td>
<td>
<button type="button" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
<table></div>
And I get the template in javascript like this :
var output = Mustache.render($(template).filter('#tpl-general-tr-phone').find("tbody").html(), ...
This solution works fine