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.
Related
My question is - I think - pretty simple.
I have a table, a classic one. In this table, I want to display values of two arrays named networks and channels.
Each network in networks could contain channels but not all.
What I want is to display all the networks and their related channels.
In DIV or TD in TR it's simple but I can't do this with multiple TR.
Example :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="channel in channels | filter: { networkId: network.networkId}">{{channel.Name}}</td>
</tr>
Works like a charm!
But I'm searching thing like this :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
But I know that is not the good code to do this :)
Someone know how to do that ?
I don't want to change the TABLE by DIV.
Kind regards !
Each ng-repeat has its own scope so your network is not available on the second TR repeat.
If you really want to stick with table, you can create a table inside your tr like this:
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
<td>
<table>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
</tr>
</table>
</td>
</tr>
I can calculate sum of property in ng-repeat list like this:
<table ng-init="total=0">
<tr ng-repeat="item in items">
<td ng-init="$parent.total = $parent.total + item.Amount">
{{item.Amount}}
</td>
</tr>
</table>
However this does not work, when items are filtered: ng-repeat="item in items | filter: search"
The reason is, that <table> element is initialized only once, while <tr> each time the list is filtered. Because of that, the sum is not set to 0 when filtering is applied.
Is there some event/directive, which is called when filtering is applied? I use this "calculate totals" functionality very often and wish to avoid writing calculateTotals() function several times in my controllers and directives.
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"
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/
Let's say I have this object:
var rows = [
[1, 2, 3, 4],
[11, 222, 3333, 4444]
];
Given that, and this template:
<tr ng-repeat="row in rows | orderBy ????">
<td ng-repeat="cell in row">{{ cell }}</td>
</tr>
...how can I order an ng-repeat by the second "column" of each row (the value at index 1 of the given row element)?
Am I correct that Angular does not support this case—without having to write a custom sort function? (I'm just prototyping, so using ng-init to define my scope variables instead of creating a controller.)
Actually it does. You can create custom order by functions.
http://plnkr.co/edit/f6hCbHcLkrjyTODvDWjM?p=preview
<div ng-repeat="row in rows | orderBy:secondIndex">
{{row}}
</div>
//In controller
$scope.secondIndex = function(arr){
return arr[1];
}
You just should to use orderBy:'1':
<tr ng-repeat="row in rows | orderBy:'1'">
<td ng-repeat="cell in row">{{ cell }}</td>
</tr>
Demo