In my following code i am creating an HTML table with table headers as First, second, Third and than row for each student.
Depending upon score, I need to put X in cell under relevant column header.
Example
If score 10 than put X under First
If score 9 than put X under second
If score 8 than put X under third
Can i re-write<td>{{score.Position}}</td> based on above requirement as following.
e.g.
<td>{{score.Position}} == 10 ? X :'' </td>
<td>{{score.Position}} == 9 ? X :'' </td>
Code:
<table>
<thead>
<tr>
<td></td>
<td>First</td>
<td>Second</td>
<td>Tbhird</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in Students">
<td>{{student.Name}}</td>
<td>{{score.Position}}</td>
</tr>
</tbody>
</table>
Do this
<td>{{score.Position == 10 ? 'X' : ''}}</td>
Or this
<td><span data-ng-if="score.Position==10">X</span></td>
Related
I have some problems concatenating 2 values in thymeleaf
I do the following:
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:utext="${p.preferencias.get(0).getNombrePref()} +'-'+ ${p.preferencias.get(1).getNombrePref()}">...</td>
<td th:utext="${p.email}">...</td>
</tr>
This is how the page looks like
As you can see this is not dynamic because if p.preferencias size is bigger than 2 this will be a problem and the same if is less than 2
this what i tried :
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(arcd.index).getNombrePref()}">...</td>
<td th:utext="${p.email}">...</td>
</tr>
This is what i got:
And got this
As you can see the second value move to email :( then i thought in concat the values and try this :
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(arcd.index).getNombrePref()} + '-' +${p.preferencias.get(arcd.index).getNombrePref()} " >...</td>
<td th:utext="${p.email}">...</td>
</tr>
And this is the result:
Result 3
I dont know how to concat the values and keep those in one cell
How can i execute the loop to get all the values inside p.preferencias variable ?
EDIT:
post wrong image in result 3 now is the correct image
Finally solve the problem the tag td stay open thats why the secon value in the each iteration fill the next cell solve it using a span tag and iterate inside
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td>
<span th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(__${arcd.index}__).getNombrePref()} + (${arcd.size-1 > arcd.index}? ', ':'')"></span>
</td>
<td th:utext="${p.email}">...</td>
</tr>
Output
I have a table like this :
<tr>
<th scope="row">QUANTITÉ PRODUITE</th>
<td>{{hoursValues[0][0][0]}}</td>
<td>{{hoursValues[0][0][1]}}</td>
<td>{{hoursValues[0][0][2]}}</td>
<td>{{hoursValues[0][0][3]}}</td>
<td>{{hoursValues[0][0][4]}}</td>
<td>{{hoursValues[0][0][5]}}</td>
<td>{{hoursValues[0][0][6]}}</td>
<td>{{hoursValues[0][0][7]}}</td>
</tr>
<tr>
<th scope="row">OBJECTIF QUANTITÉ</th>
<td>{{hoursValues[0][2][0]}}</td>
<td>{{hoursValues[0][2][1]}}</td>
<td>{{hoursValues[0][2][2]}}</td>
<td>{{hoursValues[0][2][3]}}</td>
<td>{{hoursValues[0][2][4]}}</td>
<td>{{hoursValues[0][2][5]}}</td>
<td>{{hoursValues[0][2][6]}}</td>
<td>{{hoursValues[0][2][7]}}</td>
</tr>
I want to compare each column of a row with the other corresponding column, for example : hoursValues[0][0][0] && hoursValues[0][2][0] and according to this comparison, I want to apply the classes.
I mean, if hoursValues[0][0][0] > hoursValues[0][2][0], I want to display the result in green else red.
Can anyone help me ? What should I write in my controller ?
in each td just do this
<td ng-class="{true:'green', false:'red'}[hoursValues[0][0][0] > hoursValues[0][2][0]]">
obvius just change each column with corresponding one.
next td
<td ng-class="{true:'green', false:'red'}[hoursValues[0][0][1] > hoursValues[0][2][1]]">
I have a small problem I would like to set up a ng-repeat dynamic with the values I receive from my JSON object,
First, i made my th from my table with the keys
Secondly, i would like to do my td in dynamic (without putting the name of the key ex: obj.NOM, obj.TYPE ...)
I managed to do something with an Object.keys but logic is not good so I need some help
this is my JSON object ( i show you just the little piece of code that I have a problem )
"HEADER":[
{"NOM":"API-APP","TYPE":"string","DESCRIPTION":"Code application"},
{"NOM":"API-SIGNATURE","TYPE":"string","DESCRIPTION":"Signature de la requete API"},
{"NOM":"API-TIMESTAMP","TYPE":"integer","DESCRIPTION":"Timestamp en microseconde"}]
and this is my ng repeat
<span><b>HEADER</b></span>
<br>
<br>
<table class="table">
<th ng-repeat ="(key, itemHeader) in itemHead.HEADER[0] track by $index">{{key}}</th>
<tr ng-repeat ="(key, itemHeader) in itemHead.HEADER track by $index" >
<td>{{getFirstPropertyValue(itemHeader,$index)}}</td>
</tr>
</table>
I explain i made first a ng-repeat for th with the keys and I would like put my data (3 data per row) in td without put ( .NOM .TYPE .DESCRIPTION)
So I took the function object.key which works very well but that makes me just one element per row but I need 3 elements per row
this is my scope for the function object.key
$scope.getFirstPropertyValue = function(obj,index){
return obj[Object.keys(obj)[index]];
}
and this my result
thanks in advance for your help
<table class="table">
<thead>
<tr>
<th ng-repeat="(key, itemHeader) in itemHead.HEADER[0]">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in itemHead.HEADER">
<td ng-repeat="column in row">
{{column}}
</td>
</tr>
</tbody>
</table>
I have same value in this <td>{{key}}</td> so i don't want to display again and again i want to merge it in single enter image description here
<tbody ng-repeat="(key, val) in myctrl.dep">
<tr ng-repeat="(key_data, val_data) in val">
<td>{{key}}</td>
<td>{{key_data}}</td>
<td>{{val_data.no_of_transaction || 0}}</td>
<td>{{val_data.total_amount || 0}}</td>
</tr>
</tbody>
How to achive this
For the child ng-repeat, you have same value for key it seems. You can make use of rowspan like this to achieve it:
<tbody ng-repeat="(key, val) in myctrl.dep">
<tr ng-repeat="(key_data, val_data) in val">
<td ng-show="key_data === 0" rowspan="{{val.length}}">{{key}}</td>
<td>{{key_data}}</td>
<td>{{val_data.no_of_transaction || 0}}</td>
<td>{{val_data.total_amount || 0}}</td>
</tr>
</tbody>
Notice that we will only show that for first (using key_data === 0 which is your index). And, we rowspan it till the length of child ng-repeat.
Ng-repeat is present on a table row
My query is how can we achieve the following:
<tr ng-repeat="x in y">
Looping here....
</tr>
Now as data object is looping on a <tr>. I have a scenario where I have to display data of 1 row in two <tr>.
Eg.
Table
Data1 data1.2 data1.3 data1.4
Data2 data2.2
Data2b data2.3 data2.4
Data3 data3.2 data3.3 data3.4
Data4 data4.2 data4.3
I.e. display data of 1 row in two
Can't use ng-repeat-end
1) You can combine ng-if with ng-repeat and 2) ng-repeat supports multi-element with ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="item in [1, 2, 3, 4, 5, 6]">
<td>{{item}}</td><td>something else</td>
</tr>
<tr ng-if="item % 2 === 0" ng-repeat-end>
<td colspan="2">-even</td>
</tr>
Demo
I modified the solution New Dev provided for my purposes & thought I'd share since it really saved me.
I needed a solution to repeat my table header row after every nth row as an alternative to a "frozen/fixed upon scrolling" header row, which just isn't feasible for my use case.
In this example, I'm showing the header row after every 25 rows, but not if it's going to be the last row in the table: (($index+1) != itemCollection.length).
<table class="table table-bordered">
<thead>
<tr>
<th>Column Header 1 - Value</th>
<th>Column Header 2 - Index</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in itemCollection">
<td>{{item}}</td>
<td>{{$index}}</td>
</tr>
<tr ng-repeat-end="" ng-if="(($index+1) % 25 === 0) && ($index+1) != itemCollection.length">
<th>Column Header 1 - Value</th>
<th>Column Header 2 - Index</th>
</tr>
</tbody>
</table>
Check out the modified demo. For simplicity's sake, I used an inline collection, so the "not if it's going to be the last row in the table" logic isn't included (as you'll see with the unneeded column header at the very bottom), but you get the picture.
You need to repeat tbody instead of tr.
<tbody ng-repeat="x in y" >
<tr>
<td>{{X. row data}}</td>
<td>{{X. row data 2}}</td>
</tr>
<tr>
<td colspan="2">
{{X. secondRowData}}
</td>
</tr>
</tbody>
<tr ng-repeat-start=x in y>
<td>selectbox here
<tr\>
<tr ng-repeat-end ng-if=somecondition>
<td>label data <\td>
<\tr>
So now we have already used ng-repeat-end. Inside ng-repeat-end i have to display 2 rows for a single iteration.
<tr><td indexis1>selectbox<\td><\tr>
<tr><td indexis2>label primary<\td><\tr>
<tr><td indexis2>label secondary<\td><\tr>
This is a rough code snippet and there are numerous td already present in code.