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
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.
how to iterate json data using ng-repeat in angularjs
{
"CSS Corp":{
"COE":{"win_loss":[6,4]},
"YNOS":{"win_loss":[5,5]},
"ESTEE":{"win_loss":[10,0]},
"ELC":{"win_loss":[8,2]}
},
"SSSPL":{
"PEG":{"win_loss":[0,10]},
"ARUBA":{"win_loss":[2,8]},
"SALES":{"win_loss":[1,9]},
"MARKETING":{"win_loss":[7,3]}
},
}
Your question is very broad. You will first have to attach those JSON data to the scope of your controller and expose it to the template through a variable myData. Assuming you know how to do that, the use of ng-repeat becomes very trivial (add more columns or rows to fit your dataset):
<table>
<thead>
<tr><th>Header 1</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in myData">
<td>{{ item }}</td>
</tr>
</tbody>
</table>
Use ng-repeat
Syntax : <tr ng-repeat="value in container">
Assuming that you have a array of JSON object in your JS as below,
var arrayObject = [
"CSS Corp":{
"COE":{"win_loss":[6,4]},
"YNOS":{"win_loss":[5,5]},
"ESTEE":{"win_loss":[10,0]},
"ELC":{"win_loss":[8,2]}
},
"SSSPL":{
"PEG":{"win_loss":[0,10]},
"ARUBA":{"win_loss":[2,8]},
"SALES":{"win_loss":[1,9]},
"MARKETING":{"win_loss":[7,3]}
}
];
Then your view should iterate as below,
<div ng-repeat="company in arrayObject">
{{company}} // use whatever you want to print
</div>
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/
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.
The documentation:
https://docs.angularjs.org/api/ng/directive/ngRepeat
says that $index will be a key if I am iterating through an object. How do I retrieve a sequential numeric index (0,1,2...) instead? (Assuming I still wish to use an object and not an array)
Consider your object is
$scope.object = {};
$scope.object.person1 = {name: "tom", age:"5"};
$scope.object.person2 = {name: "jerry", age: "5"};
$scope.object.person3 = {name: "sparky", age: "3"};
Now you want to display the people in the object in a table.
<table>
<thead>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="person in object">
<td>{{$index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
your result would be
Id Name Age
1 tom 5
2 jerry 5
3 sparky 3
sometimes you may run into Duplicates error [ngRepeat:Dupes] using ng-repeat. The error occurs when you have duplicate entries in your array. For example
$scope.store = ["apple", "milk", "carrots", "apple"];
<li ng-repeat="item in store">{{item}}</li>
apple occurs twice, so its a duplicate. You can read more about the error at https://docs.angularjs.org/error/ngRepeat/dupes
In order to avoid the error you tell ng-repeat to use the $index to track the elements in the array by numeric indices which will always be unique.
<li ng-repeat="item in store track by $index">{{item}}</li>
you can $index in ngRepeat iteration. See below fiddle.
http://jsfiddle.net/NFNvc/24/