I have a table like in the picture,when the stop button is clicked the record gets stored in the first row not in the last row because I ORDER BY EndTime DESC in SQL,but now I want the Record column to be in reversed.How can I do that?
HTML:
<tr ng-repeat="previousdowntime in Model.PreviousDowntimeEvents | orderBy:'$index':true">
<td>{{$index + 1}}</td>
<td>{{Model.GetDowntimeText(previousdowntime.CategoryId)}}</td>
<td><span ng-bind="previousdowntime.StartTime|date:'shortTime'"></span></td>
<td><span ng-bind="previousdowntime.EndTime|date:'shortTime'"></span></td>
<td>{{previousdowntime.Comment}}</td>
<td>{{previousdowntime.TotalMinutes}} minutes</td>
</tr>
The $ variables in the ng-repeat are tools you should use, not change.
If you only want to reverse the values in the Records column use simple maths: {{Model.PreviousDowntimeEvents.length - $index}}
<tr ng-repeat="previousdowntime in Model.PreviousDowntimeEvents | orderBy:'$index':true">
<td>{{Model.PreviousDowntimeEvents.length - $index}}</td>
<td>{{Model.GetDowntimeText(previousdowntime.CategoryId)}}</td>
<td><span ng-bind="previousdowntime.StartTime|date:'shortTime'"></span></td>
<td><span ng-bind="previousdowntime.EndTime|date:'shortTime'"></span></td>
<td>{{previousdowntime.Comment}}</td>
<td>{{previousdowntime.TotalMinutes}} minutes</td>
</tr>
Related
I've used [row] attribute but still not working and when the data reflects on UI I want it in descending order. Can anyone please let me know how it is done without adding sorting Icon?
More
{{col.header}}
{{rowData[col.field]}}
</tr>
</ng-template>-->
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td style="width:300px">{{rowData.atomName}} </td>
<td style="width:300px" (click)="show(rowData.message,op2.show($event))" pTooltip="View" tooltipPosition="top" tooltipStyleClass="custom-tooltip">
{{rowData.processName}}<!--</td>-->
<!--<td style="width:20px">-->
</td>
<td style="width:20px">
<!--{{rowData.executionTime}}-->
{{rowData.executionTime | date :'MM/dd/yyyy' }} ({{rowData.executionTime | date :'h:mm:ss a' }})
</td>
</tr>
</ng-template>
</p-table>
</p-panel>
</div>
It looks more like Angular Js than Angular 8 but if referring to Angular 8 -
Only possible solution to this is sort in the TS file using Array Sort (refer link - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). and then display only 5 top results using *ngFor and index inside *ngFor.
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
Trying to format a table using Angular where:
If the day of the month changes, then you insert a new row which just contains the date (but also displays the data for that index value immediately below). If the day of the week is the same as before continue inserting the rows.
1) Clearly my code for accessing previous value in index is wrong but I can't seem to find anything clearly which helps.
2) I realise that my current code would compare the full datetime value and not just the day of the month (or week) but I am unsure how to do this in this scenario.
3) when the day changes and I try and insert the date line, I cannot get an additional new row formatted correctly which includes the data for that index value. I have tried playing around with various and combinations.
Please could someone help correct this code or point me in the right direction
Thanks
<table class="table-striped">
<thead>
<tr>
<td>day</td>
<td>time</td>
<td>region</td>
<td>event</td>
<td>period</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let eco of eco_r ; let i = index">
<template [ngIf]="eco.date != eco[i-1].date">
<td colspan="5">{{eco.datetime| date:'longDate' }}</td>
<tr>
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
<template [ngIf]="eco.date == eco[i-1].date">
<td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td>{{eco.region}}</td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</template>
</tr>
</tbody>
</table>
------------UPDATE ---------------
Following #Iancovici comments I have revised the following
i) corrected to reference eco_r[i-1].date
ii) Changed sql source to provide eco.day_of_month and eco.week_of_year to make it easier to reference and check conditions
iii) updated code to only check previous value when i > 0
I am still unable to get it to display a new line with the date AND also include the data for that value of i on a separate row where it formats correctly. Utilising as in my revised code puts all 5 values into the first column of the next row and messes put the table format. How should I resolve this please?
Thanks
<template [ngIf]="i >0 && eco.day_of_month != eco_r[i-1].day_of_month">
<tr><td colspan="5">{{eco.datetime| date:'longDate' }}</td>
</tr>
<tr> <td>{{eco.datetime | date:'EE'}}</td>
<td>{{eco.datetime | date:'shortTime'}}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</template>
Should probbly be *ngIf not [ngIf] in general. But I see in your case it’s ok because you’re using an ng template which means instead of directive *ngIf it’s not a bonded property [ngIf]
Also you're accesing the same instance, should access index of array instead so..
change from
*ngIf="eco.date == eco[i-1].date">
to
*ngIf="eco.date == eco_r[i-1].date">
Update: Two more notes
Make sure you create a table, with tag
Don't be afraid to use paranthesis if conditonal expressions become more complex, so you can distinguish the two conditions.
Try this without the filters, then integrate the filters in.
<table>
<div *ngFor="let eco of eco_r; let i = index">
<div *ngIf="(i > 0) && (eco.day_of_month != eco_r[i-1].day_of_month)">
<tr>
<td colspan="5">{{eco.datetime }}</td>
</tr>
<tr>
<td>{{eco.datetime }}</td>
<td>{{eco.datetime }}</td>
<td> {{eco.region}} </td>
<td>{{eco.event}}</td>
<td>{{eco.period}}</td>
</tr>
</div>
</div>
</table>
I create a html table with angular js. But getting problem to make its order reverse.
<tr ng-repeat="(key, val) in qr_score_list ">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
But don't know how to set its order reverse w.r.t. keys.
The condition is i cant change array sturcture.
Here is my object -:
$scope.qr_score_list = {'6':99,'5.5':98,'5':93,'4.5':80,'4':56,'3.5':38,'3':15,'2.5':7,'2':2,'1.5':1,'1':1,};
The main problem is Javascript doesn't support object keys ordering,
You can try something like this:
<tr ng-repeat="key in Object.keys(qr_score_list).reverse() ">
<td>{{key}}</td>
<td>{{qr_score_list[key]}}</td>
</tr>
have you tried ?
<tr ng-repeat="(key, val) in qr_score_list | orderBy:'$index':true">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
this also may work :
<tr ng-repeat="(key, val) in qr_score_list | orderBy:'-$index':true">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
I'm trying to regenerate my site with jekyll but it's changing pre to p and adding th/td to tables.
Here's an example diff of the pre to p problem. The - indicates a line that was replaced with a + line. The code in markdown hasn't changed.
Diff
-<pre><code>-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
-</code></pre>
+<p><code>
+-Dhttps.proxyHost=proxy -Dhttps.proxyPort=3128
+</code></p>
Markdown
```
RunScriptOnNode.Factory .runScript → create submit → submit
```
Here's an example diff of the th/td problem. The + indicates a new column that wasn't generated before and definitely isn't in my markdown file.
Diff
<table>
<thead>
<tr>
+ <th></th>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
</thead>
<tbody>
<tr>
+ <td></td>
<td> Value 1.1 </td>
<td> Value 1.2</td>
</tr>
<tr>
+ <td></td>
<td> Value 2.1 </td>
<td> Value 2.2 </td>
</tr>
...
Markdown
| Column 1 | Column 2 |
|------------|---------------------|
| Value 1.1 | Value 1.2
| Value 2.1 | Value 2.2
Why is jekyll doing this to my generated HTML files?
In these situations, it's wise to verify the versions of your markdown engine and/or if you can get the desired result by changing engines. :)