If I have to print something like this --
Reason : reason number 1
reason number 2
reason number 3
Code : code number
Remarks : remark
So Reason, Code, and Remarks are headings, and thus I have them in tag, rest of the things such as - reason number 1, reason number 2, code number and remark are the values.
Now, If I use for the heading, the value automatically goes to a new line, What if I want to print them as key-values in a single line. How can I do so.
Preferably without float.
Try like this:
Working Demo
.html
<table border="1">
<ng-container *ngFor="let item of list1;let i = index">
<tr>
<td> {{list1[i]}}</td>
<td *ngIf="list2[i].length > 1">
<li *ngFor="let li of list2[i]">
{{li}}
</li>
</td>
<td *ngIf="list2[i].length <= 1">
{{list2[i]}}
</td>
</tr>
</ng-container>
</table>
.ts
list1 = ["Instructions ", "Reason Code "];
list2 = [["inst 1 ", "inst 2 "], ["Reason code is so and so"]];
Related
I have to make a table, where the first cell in a row is the name of the store, and other cells are names of terminals related to that store. Below you can see how it looks now. Stores is a list of stores, where every store has a list of terminals.
<tbody>
<tr *ngFor="let store of stores; let i = index">
<td>
<label>{{ store.name }}</label
>
</td>
<td *ngFor="let terminal of store.terminals">
<label>{{ terminal.name }}</label
>
</td>
</tr>
</tbody>
It's working perfectly until there aren't too many terminals. Now I need to break that row in more of them.
Now the table looks like this:
Store1 Terminal1 Terminal2 terminal3 terminal4 Terminal5 Terminal6 terminal7 terminal8
Store2 Terminal1 Terminal2 terminal3 terminal4 Terminal5 Terminal6 terminal7 terminal8
And I need to make it look like this:
Store1 Terminal1 Terminal2 terminal3 terminal4
Terminal5 Terminal6 terminal7 terminal8
Store2 Terminal1 Terminal2 terminal3 terminal4
Terminal5 Terminal6 terminal7 terminal8
I thought, that I could make another table, only for terminals, but that didn't work as I thought it would.
Instead of repeating the "td" with terminal data. Add a div inside that td and repeat the terminal data inside that.
<table>
<tbody>
<tr *ngFor="let store of stores; let i = index">
<td>
<label >{{ store.name }}</label>
</td>
<td>
<div class="terminals">
<span class="terminals_value" *ngFor="let terminal of store.terminals">{{ terminal.name }}</span></div>
</td>
</tr>
</tbody>
</table>
Add the css to style the div block as appropriate
.terminals{
width:500px;
display:flex;
flex-wrap: wrap;
}
.terminals_value{
width:100px;
padding:2px;
}
I have created a stackblitz project as a solution, you can check it out here - https://stackblitz.com/edit/table-structure
Consider my scenario, I have 2 lists coming from the service call, one list will be used as the table headings and another list will be used as the table data.
Something like this---
List 1 - [Name, Age]
List 2 - [Shubham, 25]
Table should look like -
Name Shubham
Age 25
Another example...
List 1 - [DOC1, DOC2]
List 2 - [Pending, Approved]
DOC1 Pending
DOC2 Approved
Can anyone help?
Try like this:
Working Demo
<table>
<ng-container *ngFor="let item of list1;let i = index">
<tr>
<td> {{list1[i]}}</td>
<td> {{list2[i]}}</td>
</tr>
</ng-container>
</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 have a table that uses ng repeat for the columns, and now i want to hide the first and third column. Does anyone know how I would do that?
ng-hide="$first&&$third"
Didn't work
This is how it looks atm:
<th role="columnheader" ng-repeat="column in tableColumns" ng-hide="$first&&$third" ng-if="column.visible">{{column.displayName}}</th>
You can use a counter for that. And check for the value of the counter to add a column. See this bellow code as a reference.
<tr ng-repeat="obj in OrderList">
<td>{{obj.ID}}</td>
<td>{{obj.Name}}</td>
<td ng-if="((++$index != 3)||($index != 1))">
<i>Delete</i>
</td>
</tr>
Hope this helps.
This hides any value at first and third position in an array
<span ng-hide="($index + 1) == ($first || ($first + 3))">{{val.CompID}}</span>
This is my HTML:
<tbody><tr><th>SHOES</th></tr>
<tr>
<td>
Shoe 1 <br>shoe 2<br> shoe3 <br>
</td>
</tr>
</tbody>
This is my code:
nodes = page.css("tr").select do |el|
el.css('th').text =~ /SHOES/
end
nodes.each do |value|
puts value.css("td").text
end
I wish to get the values shoe 1, shoe 2 and shoe 3, but there is no output. I suspect there is an extra <tr></tr> in between <tr><th>SHOES</th></tr>. Or are the <br> the culprit?
There are other structures like:
<tr>
<th>SHOES</th>
<td>NBA</td>
</tr>
and I got the desired output "NBA".
What did I do wrong?
I have two kinds of structures:
Name1: value
Name1: value2
The above would give:
<tr>
<th>Name1</th>
<td>Value</td>
</tr>
but sometimes it's:
Name:
value
value2
value3
So the HTML is:
<tbody><tr><th>Name</th></tr>
<tr>
<td>value<br>value2<br> ....</td>
In HTML, tables are composed by rows. When you iterate by those rows, only one of them is the header. Although logically you see a relation between the body rows and the header ones, for HTML (and therefore for Nokogiri) there's none.
If what you want, is to get every value of the cells that have a specific header, what you can do is count the specific column, and then get the values from there.
Using this HTML as source
html = '<tbody><tr><th>HATS</th><th>SHOES</th></tr>
<tr>
<td>
hat 1 <br>hat 2<br> hat3 <br>
</td>
<td>
Shoe 1 <br>shoe 2<br> shoe3 <br>
</td>
</tr>
</tbody>'
We then follow to get the position of the right , in the first row of the table
page = Nokogiri::HTML(html)
shoes_position = page.css("tr")[0].css('th').find_index do |el|
el.text =~ /SHOES/
end
And with that, we find the s in that position in every other row, and get the text from that
shoes_tds = page.css('tr').map {|row| row.css('td')[shoes_position] }.compact
shoes_names = shoes_tds.map { |td| td.text }
I use a compact to remove the nil values, as the first row (the one with the headers) will not have a td, thus returning nil
You can get there with css:
td = doc.at('tr:has(th[text()=SHOES]) + tr td')
td.children.map{|x| x.text.strip}.reject(&:empty?)
#=> ["Shoe 1", "shoe 2", "shoe3"]
but maybe mixing it up with xpath is better:
td.search('./text()').map{|x| x.text.strip}
#=> ["Shoe 1", "shoe 2", "shoe3"]