I'm wondering if there is a way to determine the index when processing a ng-repeat.
For example, I only want the first and second indexs to have anchor tags in the following:
<tbody>
<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
<!-- only want to make the index 0 and 1 have an anchor -->
<td ng-repeat="column in cols">{{row[column]}}</td>
</tr>
</tbody>
I'm thinking something like the following is needed, but I can't figure out (or find) the proper syntax:
<!-- if index == 0 or 1, show anchor -->
<td ng-repeat="column in cols" ng-if="row[$index] <2">{{row[column]}}</td>
<!-- else, if index >= 2, don't show anchor -->
<td ng-repeat="column in cols" ng-if="row[$index] >=2">{{row[column]}}</td>
Here is a fiddle with a base example: https://jsfiddle.net/zp2cqxqb/
Thanks for any assistance with this!
You are interested in the $index itself, rather than the row[$index] value, as you are currently checking.
As a bonus, if you make use of another inline element, such as a span, for the non-anchor value, you can avoid a double ng-repeat statement:
<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
<!-- only want to make the index 0 and 1 have an anchor -->
<td ng-repeat="column in cols">
<a ng-if="$index < 2" href="#">{{row[column]}}</a>
<span ng-if="$index >= 2">{{row[column]}}</span>
</td>
</tr>
Updated fiddle: https://jsfiddle.net/z87ntjne/
Related
I have two tables with tr like this, only changing the holderId
<tr class="text-center" ng-if="obligation3.debtor.holderId == 3"
ng-repeat="obligation in vm.application.obligations">
<td><b>Ratenkredit {{$index+1}} </b></td>
</tr>
<tr class="text-center" ng-if="obligation.debtor.holderId == 2"
ng-repeat="obligation in vm.application.obligations">
<td><b>Ratenkredit {{$index+1}} </b></td>
</tr>
The problem is that the $index does not reset. I want to count the number of $index in the for loop and in the second loop $index should start as 0:
Secondary Applicant table should start at 1.
Instead of using ng-if, use a filter.
<tr class="text-center"
ng-repeat="obligation in vm.application.obligations | filter: { debtor.holderId: 3 }: true">
<tr class="text-center"
ng-repeat="obligation in vm.application.obligations | filter: { debtor.holderId: 2 }: true">
The true tells the filter to use strict matching, otherwise it would match items where holderId is 13, 23, etc.
I'm trying for hours to figure out why is my md-data-table only sorting the current page.
The same thing is happening on the search filter.
Can someone say why is it doing this and how can i fix it?
<input ng-model="searchInterview">
<md-table-container>
<table md-table="" md-progress="promise" ng-model="selected">
<thead md-head md-order="sort.order">
<tr md-row>
<th md-column md-order-by="dataapplicazione"><span>Data app</span></th>
<th md-column md-order-by="nomecognome"><span>Nome e cognome</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in main.interviewsList | limitTo: sort.limit : (sort.page -1) * sort.limit | orderBy:sort.order | filter:searchInterview ">
<td md-cell>{{ item.dataapplicazione | date}}</td>
<td md-cell>{{ item.nomecognome }}</td>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="sort.limit" md-limit-options="limitOptions" md-page="sort.page" md-total="{{main.interviewsList.length}}" md-on-paginate="promiseInterviews" md-page-select></md-table-pagination>
Sorting Desc
Sorting Asc
Maybe change the order of the filters?
Also; this is in the documentationof mg-data-table:
My Pagination Isn't Working?!
Make sure you pass md-page, md-limit, and md-total to the directive and that they are finite numbers.
Pages are not zero indexed. The directive will assume pages start at one. If your query language expects pages to be zero indexed then just subtract one before making the query.
How I can I automatically select the last row in a table
ng-repeat="unit in selectedOrder.products" using something like select by track by $index == desc or alternatively ng-options
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products" ng-if="$last">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
will give you only the last row selected
In ng-repeat you can use the $last special variable to apply something only if it's the last element. see: https://docs.angularjs.org/api/ng/directive/ngRepeat
you can use it as a condition for anything you want to do in the tag. like
<img class="{{$last ? 'selected'}}" ng-class="{'selected': $last}" ng-if="$last" ....>
or however you like (these are just examples)
Always keep in mind though that using angular means that you have to edit your model to apply changes to your view, so if you want to have an element selected you have to do something to your model so that the element contains a value that makes it selected and then your view should reflect this.
For example in your controller you can check which element is the last in your ng-repeat array and add a selected variable, then in your view do something to make it look like your element is selected (for example: ng-class="{'selected': element.selected}") otherwise, by working on the view only you can make it look like the element is selected using $last but it won't be really selected in your model
In fact In ng-options (so we are talking about a select) you have to change your model in order to reflect your choice. So for example if your select has an attribute like this: ng-model="selected" then in your controller you set the $scope.selected variable to the last element of the array containing the values for your ng-options
You could use something like ng-if="$index == $last"
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.
Since examples always tell more then just words here is what I would like to do in another language
<tr>
<c:forEach items="${items}" var="item">
<td>...</td>
<td>...</td>
<td>...</td>
<c:if test="${item.showWarning}">
</tr><tr><td colspan="3">${item.warning}</td>
</c:if>
</tr>
So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done?
JSBin example with tr-ng-repeat
Currently (1.0.7/1.1.5) you can't output data outside the ng-repeat, but version 1.2(see youtube video AngularJS 1.2 and Beyond at 17:30) will bring the following syntax(adapted to your example):
<tr ng-repeat-start="item in items">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
<td colspan="3">{{item.warning}}</td>
</tr>
The idea is that whatever is between -start and -end will be repeated including the -end element.
One solution that I can think of is having multiple tbody tags within the same table. Here is a discussion on the use of multiple tbody tags within the same table.
So, for your issue, you could have the following setup:
<table ng-controller="ItemController">
<thead>
<th>Name</th>
<th>Description</th>
<th>warning?</th>
</thead>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3" style="text-align: center">Warning !!!</td>
</tr>
</tbody>
</table>
Repeat the table body as many times as there are entries for the table and within it have two rows - one to actually display the row entry and one to be displayed conditionally.
You can repeat over the tbody
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3">Warning !!!</td>
</tr>
</tbody>
Also you do not need to wrap the ng-show expression in {{}}, you can just use item.warning