Currently it is as follows:
In fact it was to stay like this;
I’m having trouble, can anyone help me, please?
This is the source code.
<div id="app">
<table class="table">
<thead>
<tr>
<th>Tipo de moeda</th>
<th>Valor</th>
<th>Referencia</th>
</tr>
</thead>
<tbody>
<tr v-if="bancodedados" v-for="(val, key) in bancodedados.valores" :key="key">
<td> {{ val.nome }} </td>
<td> {{ val.valor }}</td>
<td>{{ val.fonte }}</td>
</tr>
</tbody>
</table>
</div>
i think you should return your data horizontally. Otherwise you can define like this.
computed: {
dolar () {
return this.bancodedados.valores[0].valor;
},
euro () {
return this.bancodedados.valores[1].valor;
},
btc () {
return this.bancodedados.valores[2].valor;
}
...
}
or you can use created statement to return data
data: {
dolar: 0,
euro: 0,
btc: 0
},
created() {
this.dolar = this.bancodedados.valores[0].valor;
this.euro = this.bancodedados.valores[1].valor;
this.btc = this.bancodedados.valores[2].valor
...
}
your table should like this in both cases
<table class="table">
<thead>
<tr>
<th>Dola</th>
<th>Euro</th>
<th>BTC</th>
</tr>
</thead>
<tbody>
<tr>
<td> {{ dolar }} </td>
<td> {{ euro }} </td>
<td> {{ btc }} </td>
</tr>
</tbody>
</table>
Related
<div *ngFor = "let recordData of employees.record">
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</table>
</div>
</div>
// **this is Angular code and this is the output this code is working but table header data is repeating after the each iteration.
I used ngFor for iteration the record array (it is in the first photo) loop. I used the ngIf to select the queryName and there are six record will come (it is in the first photo). I want that six record under a one table
**
Just moved structural directives and used ng-container to use ngIf and ngFor
I don't want to add extra element like div or span to apply ngIf and ngFor condition. that's why I used ng-container.
<div>
<div>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<ng-container *ngFor = "let recordData of employees.record">
<ng-container *ngIf = 'recordData.queryName==="style-size-query"'>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
Please try like this
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</div>
</table>
I'm using Angular and want to get index of rows inside the table when user clicks.When I try to get,it returns always 0.Because I have just one tr inside tbody but even I cange with $('table td') still getting same index.What should I change?
Table in HTML
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody *ngFor="let studentsEl of items2">
<tr>
<td>{{studentsEl.name}}</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Typescript file of the component
constructor() {
$(document).ready( function() {
$('table tr').click( function() {
alert($(this).index());
});
});
Here you have a couple of issues:
use ngFor for table row
You shouldn't use dosument.ready in constructor, but create a method and click handler.
Here is HTML:
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let studentsEl of items2; let idx = index">
<td>
<span (click)="getIndex(idx)">
{{studentsEl.name}} yourIndex: {{ idx }}
</span>
</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Your typescript file:
getIndex(idx){
console.log(idx);
}
I have a JSON object where EntityCode, EntityName, TagName, and TaskName (from TagList) are to be table column headers.
StatusFlagName in TaskRecordList is then to be in a nested row under it's related TaskName. The StatusFlagName values should be directly below the TaskName.
How do I get this working? The StatusFlagName will not display.
var ViewModel = function() {
this.taskRecords = ko.observableArray([
{
EntityCode: "name",
EntityName: "name desc23",
TagName: "L1",
TaskList: [
{
TaskName: "TaskABC",
TaskRecordList: [
{
StatusFlagName: "OK"
},
{
StatusFlagName: "TEST"
}
]
},
{
TaskName: "TaskDEF",
TaskRecordList: [
{
StatusFlagName: "Error"
}
]
}
]
}
]);
};
ko.applyBindings(new ViewModel());
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-bordered">
<tbody data-bind="foreach: taskRecords">
<tr>
<td data-bind="text: EntityCode"></td>
<td data-bind="text: EntityName"></td>
<td data-bind="text: TagName"></td>
<td></td>
<!--ko foreach: TaskList-->
<td data-bind="text: TaskName">
<table>
<tbody>
<!--ko foreach: TaskRecordList-->
<tr>
<td data-bind="text: StatusFlagName"></td>
</tr>
<!--/ko-->
</tbody>
</table>
</td>
<!--/ko-->
</tr>
</tbody>
</table>
When you use <td data-bind="text: TaskName"> knockout will replace whatever you have inside this tag with the value of TaskName as a text that's why your last nested table is being replaced with TaskName value.
You can add a div or span for TaskName something like below :
<table class="table table-bordered">
<tbody data-bind="foreach: taskRecords">
<tr>
<td data-bind="text: EntityCode"></td>
<td data-bind="text: EntityName"></td>
<td data-bind="text: TagName"></td>
<td></td>
<!--ko foreach: TaskList-->
<td>
<div data-bind="text: TaskName"></div>
<table>
<tbody>
<!--ko foreach: TaskRecordList-->
<tr>
<td data-bind="text: StatusFlagName"></td>
</tr>
<!--/ko-->
</tbody>
</table>
</td>
<!--/ko-->
</tr>
</tbody>
</table>
I've recently started using KnockOut, so I'm very new to this.
I have completed every tutorial on their site, yet can't get this specific thing to work.
I have to arrays, on the left being all the items, on the right being the items you've selected.
Once you click on the item (left table), it should .push to the right table
ViewModel:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
request.done(function (data) {
item.addItem = function () {
alert("item clicked, materiaal id: " + this.MateriaalId);//works
alert(this.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
I'm assuming it's either in this code here, or I'm not showing it correctly in my html (because I'm not getting any console errors)
HTML (right side)
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<table class="orderFormArticlesTable" style="width: 47%;float: right; font-size: 9pt;">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<!--<td><input class="orderedQty" style="max-width: 15%" value="1" />[pieces]</td>-->
<td>Remove</td>
</tr>
</tbody>
</table>
I'm not sure I've understood you right, but I'd solve your task this way:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
function proscessRequest(item) {
item.addItem = function () {
//alert("item clicked, materiaal id: " + this.MateriaalId);//works
//alert(item.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
ko.applyBindings(viewModel);
proscessRequest({MateriaalSku: "M1", MateriaalDescription: "D1", MateriaalId: "1"});
proscessRequest({MateriaalSku: "M2", MateriaalDescription: "D2", MateriaalId: "2"});
proscessRequest({MateriaalSku: "M3", MateriaalDescription: "D3", MateriaalId: "3"});
proscessRequest({MateriaalSku: "M4", MateriaalDescription: "D4", MateriaalId: "4"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<div>Alavilable items:</div>
<div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: addItem">Add</div></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div>Ordered items:</div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: function() { $parent.orderedItems.remove($data); }">Remove</div></td>
</tr>
</tbody>
</table>
</div>
</form>
Note
I've mocked request with "proscessRequest" function called after bindings have been applied.
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>