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>
Related
I'm trying to create a simple table. I would like a footer with only one cell but I don't know why it's divided in two. Any idea?
<table class="table-cart-view-producer">
<thead>
<tr>
<th>Produit</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
</thead>
<tfoot>
<tr>
<th> Prix Total du Panier : <strong>{{cart_price}}€</strong></th>
</tr>
</tfoot>
<tbody>
{% for item in cartitems %}
<tr>
<td>{{item.stock_item.product_stockitem.name}}</td>
<td>{{item.quantity}} {{item.stock_item.product_stockitem.unit}}</td>
<td>{{item.get_total_price}}€</td>
</tr>
{% endfor %}
</tbody>
</table>
It renders this way:
I am new to vue and currently working on a project that will load data from database and display it in a table. There are 9 table headers under tag and under the will have the v-for loop that will load the data from database (please refer to the code below). However, the data was successfully loaded but it does not load to the next column that follows the table header (please refer to the image below). Any suggestion on what to do for this? Thank you.
P.S. I have tried to do some research but none provide me the answer that I am looking for as I did 3 layers of nested v-for loop.
This is how the data being loaded, but everything is put under the "agency" column
These are the respective columns that these data should be appended into but it is empty due to the misconfiguration
<thead>
<tr>
<th scope="col">
Agency
</th>
<th>
Ref No
</th>
<th>
Document Type
</th>
<th>
Category
</th>
<th>
Description
</th>
<th>
Submission
</th>
<th>
Starting Date
</th>
<th>
Closing Date
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<div v-for="values in objects">
<div v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</div>
</div>
</tbody>
The problem is that you are using divs as the root element of the tbody. As they are rendered in the DOM, it takes out the td's space and the first loop ends up in the first column.
You can solve this by replacing div with template, since it does not render on final DOM output.
Here is a fix:
<tbody>
<template v-for="values in objects">
<template v-for="value in values">
<tr v-for="item in value">
<td scope="col"> {{ item.agency }} </td>
<td scope="col"> {{ item.reference }} </td>
<td scope="col"> {{ item.type }} </td>
<td scope="col"> {{ item.category }} </td>
<td scope="col"> {{ item.description }} </td>
<td scope="col"> {{ item.submission }} </td>
<td scope="col"> {{ item.starting_date }} </td>
<td scope="col"> {{ item.closing_date }} </td>
<td scope="col">
<a :href="item.link" target="_blank"> View </a>
</td>
</tr>
</template>
</template>
</tbody>
To make Vue/eslint stop warning about the missing key directive, you could add the following to the v-fors:
<template v-for="(values, i) in objects">
<template v-for="(value, j) in values">
<tr v-for="(item, k) in value" :key="`${i}.${j}.${k}`">
I find some posts in Stack Overflow but it doesn't work for me. I need some specific help.
This is my board page :
When I type long title post, it looks like this :
As you can see here, it ruins each table cell's width, as well as text not being truncated.\
What I want to do :
If text reaches the end of title field, it should be truncated
Anything should not ruin the table format (width..etc)
Here is my html code (used in django):
{% extends 'chacha_dabang/skeleton/base.html' %}
{% block content %}
<div class="container inner">
<div class="row">
<div class="col-md-8 col-sm-9 center-block text-center">
<header>
<h1> 차차다방 게시판 </h1>
<p> 회원들의 게시글을 볼 수 있는 페이지 입니다.</p>
</header>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container inner-bottom">
<div class="table-responsive">
<table class="table">
<col width="65%">
<col width="15%">
<col width="13%">
<col width="7%">
<thead>
<tr>
<th>제 목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
{% for post in posts %}
<tr>
<td class="td-title-area"> {{ post.title}} </td>
<td> {{post.author}} </td>
<td> {{post.created_at|date:"SHORT_DATE_FORMAT"}} </td>
<td> 11 </td>
</tr>
{% endfor%}
</tbody>
</table>
</div>
<br>
<br>
{% if is_paginated %}
<div class="pagination text-center" style="position:center;">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
{% endif %}
</div>
{% endblock %}
Need your helps. Thanks
Edit
Here is what I'm trying to do :
1. I made class named truncate and define css for it :
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And add truncate class to my table :
<tbody>
{% for post in posts %}
<tr>
<td class="td-title-area">
<a href="{{ post.get_absolute_url }}" class="td-title truncate">
{{ post.title}}
</a>
</td>
<td> {{post.author}} </td>
<td> {{post.created_at|date:"SHORT_DATE_FORMAT"}} </td>
<td> 11 </td>
</tr>
{% endfor%}
</tbody>
And result is :
You could try something like this:
.td-title-area {
position: relative;
}
.td-title-area a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table class="table">
<col width="65%">
<col width="15%">
<col width="13%">
<col width="7%">
<thead>
<tr>
<th>제 목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-title-area"> sdkjghbdslkjgbshdfjgbsdfjkhgbsdfjkghbsdgsdfhjkgbsdfkjhgbsdfkhjgbsdfkjghbsfdkjhg </td>
<td> author </td>
<td> date </td>
<td> 11 </td>
</tr>
<tr>
<td class="td-title-area"> sdkjg </td>
<td> author </td>
<td> date </td>
<td> 11 </td>
</tr>
</tbody>
</table>
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>
i tried putting my form inside the foreach so that the value passed in the form is the right value for the result not the last value. but the button inside the form is not submitting (nothing happens after clicking the button).
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Receiver's Name</th>
<th>Receiver's Contact</th>
<th>Package Type</th>
<th>Date Requested</th>
</tr>
</thead>
<tbody class="list">
#foreach($result as $res)
<form role="form" method="POST" action="/search ">
<input type="hidden" name="requestID" value="{{ $res->id }}">
<tr>
<td class="name"> {{ $res->receiverLname }},
{{ $res->receiverFname }}</td>
<td class="contact"> {{ $res->receiverContact }} </td>
<td class="type"> {{ $res->packType }} </td>
<td class="date"> {{ $res->updated_at }} </td>
<td><button class="btn"> View Transaction </button></td>
</tr>
</form>
#endforeach
</tbody>
</table>
nevermind guys. i just tried putting the value in the button instead in the input hidden type and im getting the right value in the post. :D
i get rid of the input type="hidden"
and make my button this way
<button class="btn" name="requestID" value="{{ $res->id }}">