Cant I display one value of th element in tr with ng-repeat?
This is how my html looks
<div class="center layout-column flex">
<section layout="row" layout-align="left left">
<md-button class="md-primary" ng-click="vm.showDialogAdd($event)">Add new movie</md-button>
<md-button class="md-primary" ng-click="vm.showDialogDetails($event)">Add details</md-button>
</section>
<div class="simple-table-container md-whiteframe-4dp">
<div class="ms-responsive-table-wrapper">
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="movie in vm.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.country }}</td>
<td class="text-center">
<md-button class="md-warn" ng-click="vm.deleteMovie(movie)">Remove</md-button>
<md-button class="md-noink" ng-click="vm.showDetails(movie)">Details</md-button>
</td>
</tr>
<tr ng-repeat-end ng-show="movie._detailsVisible" ng-repeat="detail in vm.movieDetails">
<th>Actors: </th>
<td>
{{ detail.name }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to display "Actors:" like a title of all tds, something like that:
How can I do this?
Just move ng-repeat to td
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>Actors: </th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
I'm not sure what do you mean by display "Actors:" in one td, but you can try adding it in front of the detail name so that it will be displayed with the value in one single td.
Edit: Please try the below code to achieve your requirement.
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>
Actors:
</th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
Related
I have a table to list the vehicles, i need to show one message over the last three table headings only always above the three headings without exceeding the table heading width (total width of three headings).
I have implemented tried:
<div class="col-md-12">
<h2>Vehicle List</h2><br>
<h2>To be Sold</h2>
<div class="table-responsive">
<div class=" col-md-6 alert-warning" id="vechicle_msg_div">Documents pending for these
vehicles</div>
<table class="table table-bg m-t-sm">
<thead>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
<tbody *ngIf="vehicleList != null">
<td>{{ vehicleList.length +i }}</td>
<td>{{ list.ownername }}</td>
<td>{{ list.place }}</td>
<td>{{ list.name }}</td>
<td>{{ list.brand }}</td>
<td>{{ list.color }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
#vechicle_msg_div {
position: relative;
top: 1px;
padding: 10px;
width:auto;
float: right;
text-align: center;
border: 1px dashed;
}
Now what happens is the width of the text in vechicle_msg_div is not properly aligned and also the width of the text div changes based on the content of any of the td width varies.
I want to display the vechicle_msg_div in same width of last three <th></th> what ever the content's width is..
You can create another table header row and use the the colspan attribute to let its table data cells span multiple columns like this:
<table>
<thead>
<tr>
<td colspan="3"></td>
<td colspan="3">Documents pending for these vehicles</td>
</tr>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
</table>
Check out the mdn pages around https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan for more details.
I have created a table using bootstrap class in a angular project. Only table-striped and table-hover class is not working remaining classes like table-primary is working. and I have not written a single line of css code (no issue of overriding).I have tried other examples in stack but didn't work the issues were of tbody. i have tried including tbody tag but didn't work.
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date: 'short' }}</td>
</tr>
</thead>
</table>
</div>
You have to define <thead> and <tbody> tags inside the <table> tag.
table content inside the tbody will only be affected by .table-striped class as mentioned in the official document
at the beginning I wrapped and wrongly.
my mistake was that i put tag inside tag initially then i tried removing tag. but i now wrapped correctly outside
like this
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
<tbody>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
</tr>
</tbody>
</thead>
</table>
</div>
but actually tag should be after closing tag like the below one code
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
</tr>
</tbody>
</table>
</div>
I want to create a table with 2 columns: Name, Email. Everytime I press the edit button, I want to transform the td into editable inputs. The problem is that if I have more users and I press the edit button, all users will become editable, not just the selected one. How can I solve this problem?
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="!editUser">{{ user.name }}</td>
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>
<td *ngIf="!editUser">{{ user.email }}
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>
<td *ngIf="!editUser">
<a class="action-btn" (click)="onEdit()">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
editUser: boolean = false
onEdit() {
this.editUser = !this.editUser
}
How the table looks before pressing the red button
How the table looks after pressing the button
Thank you for your time! (this is what I want to achieve
Do you have an id for the user?
Then you could do something like:
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="editUserId !== user.id">{{ user.name }}</td>
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>
<td *ngIf="editUserId !== user.id">{{ user.email }}
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>
<td *ngIf="editUser !== user.id">
<a class="action-btn" (click)="onEdit(user.id)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
and
editUserId: number;
onEdit(userId: number) {
this.editUserId = userId;
}
Try this, it will work for you.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList; index as i">
<td *ngIf="i!=selectedRowIndex">{{ user.name }}</td>
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.name"></td>
<td *ngIf="i!=selectedRowIndex">{{ user.email }}
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.email"></td>
<td>
<a class="action-btn" (click)="onEdit(i)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
selectedRowIndex = -1
onEdit(rowIndex) {
this.selectedRowIndex = rowIndex;
}
I have a value foo, and this code displays its properties correctly with the following code:
<div class="col-md-6">
<p> {{ foo.name }} </p>
<p visible = "foo.description"> {{ foo.description }}</p>
<p> {{foo.tags }} </p>
<p visible = "foo.instructions"> {{ foo.instructions }} </p>
</div>
It displays four paragraphs, each with the value of foo.property
However, when I add a table underneath:
<div class="col-md-6">
<p> {{ foo.name }} </p>
<p visible = "foo.description"> {{ foo.description }}</p>
<p> {{ foo.tags }} </p>
<p visible = "foo.instructions"> {{ foo.instructions }} </p>
<table class="table table-hover">
<thead>
<tr>
<th>File Name</th>
<th>File Type</th>
<th>File Size</th>
<th> 3D View </th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="file in foo.fileId">
<td> filler </td>
<td> filler </td>
<td> filler</td>
<td> filler </td>
</tr>
</tbody>
</table>
</div>
The values now show literally as {{ foo.description }} rather than showing the value. Why would adding a simple table mess that up?
Ah, I figured it out. You have an 'ng-repeat-start' but you never end it. You need to include an 'ng-repeat-end'. Or, just use the normal 'ng-repeat' and then you don't have to specify a start and an end. This works:
<div class="col-md-6">
<p> {{ foo.name }} </p>
<p visible = "foo.description"> {{ foo.description }}</p>
<p> {{ foo.tags }} </p>
<p visible = "foo.instructions"> {{ foo.instructions }} </p>
<table class="table table-hover">
<thead>
<tr>
<th>File Name</th>
<th>File Type</th>
<th>File Size</th>
<th> 3D View </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in foo.fileId">
<td> filler </td>
<td> filler </td>
<td> filler</td>
<td> filler </td>
</tr>
</tbody>
</table>
i make a table in which rows are dynamically inserted and then i make a div below table when table height increase due to more rows the div does not show ho i set the position of a div when increase table height the div automatically below the table?
here is my code:
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td>
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div style="width:243px; height:67px; float:right; margin:0px 215px 0; border:1px solid black;">
<h5> Invoice Total(USD) {{invoiceamount}}</h5>
<h5> Paid to date {{paidamount}}</h5>
<div class="horizontalRule2" runat="server"></div>
<h5> Invoice Total(USD) {{balanceamount}}</h5>
</div>
and here is table css:
#table{
float: right;
height: 110px;
margin: 4px 215px 0;
width: 686px;
}
here is screenshot i want div show below the table:
I think in this case I think you should stick with a table for those 2 cells as well, since somehow they are part of the tabulated data.
That means you could you just add them at
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td>
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td>
</tr>
{% endfor %}
<td colspan="3" style="text-align:right;"><h5>Invoice Total(USD)</h5></td>
<td style="text-align:right;"><h5>{{invoiceamount}}</h5></td>
<td colspan="3" style="text-align:right;"><h5>Paid to date(USD)</h5></td>
<td style="text-align:right;"><h5>{{balanceamount}}</h5></td>
</tbody>
</table>
</div>
Try clearing the div#table or the totals div that is below:
div#table {
clear:both;
}