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.
Related
I need something like this with angularjs and smart table
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed" st-select-row="row">
if {{row.userName}} ==0
<td>male</td>
else
<td>female</td>
</tr>
</tbody>
You don't really need to apply a directive like ng-if if you only want to conditionally display a word/string, angular expressions are also a good choice
{{row.userName === 0 ? 'male' : 'female'}}
You need to use ngIf or ngShow directive.
The example below is using ngIf.
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed" st-select-row="row">
<td ng-if="row.userName === 0">male</td>
<td ng-if="row.userName === 1">female</td>
</tr>
</tbody>
you can make <td ng-show="row.userName == 0">male</td>
<td ng-hide="row.userName == 1">Female</td>
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>
I want to expand/collapse a row, I want to hide all odd rows and on clicking '+' button those hidden row should get visible, my current code is allowing me hide all the odd rows but on clicking '+' button all row are getting visible, my use case is to show only the odd row which is next to clicked even row.
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody ng-repeat="test in ctrl.SearchResults">
<tr ng-if="$even">
<td>
<button ng-click="ctrl.expanded = !ctrl.expanded" expand>
<span ng-bind="ctrl.expanded ? '-' : '+'"></span>
</button></td>
<td>{{test.apName}}</td>
<td>{{test.type}}</td>
</tr>
<tr ng-show="ctrl.expanded" ng-if="$odd">
<td></td>
<td>{{test.apName}}</td>
<td>{{test.type}}</td>
</tr>
</tbody>
</table>
The reason all the rows expand when you hit the plus, is that the variable expanded is on the controller. So all the rows are 'listening' to the same variable.
As atfornes pointed out in his answer, you could use the $index to identify each row. Another solution is to keep track of the current index on the controller and check for per row if he must be showed:
<tr ng-show="ctrl.expanded == $index" ng-if="$odd">
And on the click event of the plus sign you could have
ctrl.expanded = $index
Or you could handle this in the controller. In this case you can create a method on the controller which accepts the index and then set this index value to the controller's variable expanded.
At the button ng-click code, you could store the current $index with a code like:
<button ng-click="ctrl.expanded = !ctrl.expanded; ctrl.index = $index" expand>
then, you can change the ng-show condition to only display the item if ctrl.expanded and $index === ctrl.index + 1:
<tr ng-show="ctrl.expanded && $index === ctrl.index +1" ng-if="$odd">
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.
I have a list of mails which I want to show in a grid (<table>). Some of these mails have attachments. For their corresponding rows, I would like to show an attachment icon in the attachment column. For rest, it should be empty.
JsFiddle: http://jsfiddle.net/6s4Z5/
My template is as follows:
<table id="resultTable">
<thead>
<tr>
<th ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments'">
{{schema.columns[columnId].displayText}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in results.mails">
<td ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments' && row.hasAttachments">
<span ng-if="columnId != 'hasAttachments'" >{{ row[columnId] }}</span>
</td>
</tr>
</tbody>
</table>
where schema.columnOrder is an array of columnIds to be shown in the table.
This template is working but is this the best way to implement this? Moreover, I have to add an extra <span> for ng-if statement. Can that also be removed?
You pretty much can change it to something like:
<span ng-if='your check'><img src=''/>{{row[columnId}}</span>
You could set (in the controller) the value of the column hasAttachments to be the image you want to display there.