I have a carsList array having 5 values. i try slice 2 by 2
<table>
<tr *ngFor="#item of carsList | slice:0:2; #i = index">
<td>{{i}}. {{item}}</td>
</tr>
</table>
above code split 2 values only. I want slice 2 by 2.
Example
0 1
2 3
4 5
Code:
https://plnkr.co/edit/BZnaSIldgO3Dmwao1mo6?p=preview
kindly help me . where is my mistake.
The slice pipe results an array with 2 elements and ngFor would iterate over the elements in the resulted array, that doesn't provide the expected result.
To achieve the result either you need to convert the array structure or do something like this with an additional ngIf with nested ngFor.
<table>
<ng-container *ngFor="#item of carsList; #i = index">
<tr *ngIf="i % 2 === 0">
<td *ngFor="#item1 of carsList|slice:i:i + 2; #i1 = index" class="car-title">{{i1}}. {{item1}}</td>
</tr>
</ng-container>
</table>
or by removing nested ngFor and simply creating 2 td manually.
<table>
<ng-container *ngFor="#item of carsList; #i = index">
<tr *ngIf="i %2 === 0">
<td>{{i}}. {{item}}</td>
<td>{{ i + 1 }}. {{carsList[i + 1]}}</td>
</tr>
</ng-container>
</table>
FYI : Where ng-container can be used to group element which doesn't put in the DOM tree.
Updated plunker link.
Pranav's answer almost conveyed the idea for achieving it, however his plunker seemed to not show exactly what the OP had, in addition to looking a bit over-complicated.
A simple fix as per the plunker in OP would be this (confirmed it to be working there),
<ul>
<ng-container *ngFor="#item of carsList; #i = index">
<li *ngIf="i % 2 === 0">
<span class="car-title">{{i}}. {{item}}</span>
</li>
</ng-container>
</ul>
Try this -
<ul>
<ng-container *ngFor="#item of carsList; #i = index">
<li *ngIf="i % 2 === 0">
<span class="car-title">{{i}}. {{item}}</span>
<span class="car-title">{{i+1}}. {{carsList[i + 1]}}</span>
</li>
</ng-container>
</ul>
Related
Need to slice the inner ngfor loop into 3 parts
<div class="row" *ngFor="let row of matrix; index as i">
<div class="col" *ngFor="let col of row; index as j">
<div *ngFor="let placeholder of placeholders | slice:i:j">
<ng-container [ngComponentOutlet]="placeholder.component" >
</ng-container>
</div>
</div>
</div>
There are a couple of ways around this:
$any
<p *ngFor="let item of data | slice:2:4">
{{ $any(item).parentName }}
</p>
Bracket notation
<p *ngFor="let item of data | slice:2:4">
{{ item['parentName'] }}
</p>
A function
slicedData(data : any[]) : any[] {
return data.slice(2,4)
}
<p *ngFor="let item of slicedData(data)">
{{ item['parentName'] }}
</p>
I am using primeNg . I want to implement sorting of data. The problem is that I have a column data structure where some columns have a superColumn type and that means they are divided for a set of subColumns. It works well for presenting but I have a problem with sorting it. It is never sorted on basis of the subcolumn field value but on the basis of the parent column (supercolumn) field value. That means it is taking what is in the [pSortableColumn] attribute instead of what is in the [field] attribute of the sorting icon.
Is there any way I could resolve that? This is my code below (I removed styling):
<th
*ngFor="let col of columns; let i = index;"
pResizableColumn
pReorderableColumn
[pSortableColumn]="col.field"
[pSortableColumnDisabled]="col.showSort === false"
>
<ng-container *ngIf="col.type !== 'superColumn'">
<span>{{ col.header }}</span>
<p-sortIcon [field]="col.field"></p-sortIcon>
</ng-container>
<ng-container *ngIf="col.type === 'superColumn'">
<div>{{ col.header }}</div>
<ng-container *ngFor="let subColumn of col.subColumns">
<div>
{{ subColumn.header }}
<p-sortIcon [field]="subColumn.field"></p-sortIcon>
</div>
</ng-container>
</ng-container>
</th>
I am using a *ngFor loop but I only want the loop to run on particular indexes defined in an array (i.e. indexArray = [454,640]).
If I try this, and the indexArray has two or more elements, it does not work. But If the array has only one element (i.e. indexArray=[565]) it works.
<div *ngFor="let item of items; index as i">
<table *ngIf="i == indexArray">
You can use .indexOf(i) and check whether it is in your indexArray variable.
<div *ngFor="let item of items; index as i">
<table *ngIf="indexArray.indexOf(i)> -1">
<!-- REST OF THE CODE -->
You can do the following:
<div *ngFor="let item of items; index as i">
<table *ngIf="indexArray.includes(i)">
enter code here...
</table>
</div>
Here is a working example
create index array like this
public indexArray: array = [454,640];
do like below.
<div *ngFor="let item of items; index as i">
<table *ngIf="indexArray.indexOf(i)> -1">
enter code here...
</table>
</div>
let me know if you have any doubt.
I am using *ngFor to list table data: *ngFor="let record of records",
and I want to set custom css class to record based on some conditions, f.e. if record.name === something. Is this possible?
Yes, you on [ngClass] to achieve this, for example:
<div [ngClass]="{'record': record.name === 'something' }" *ngFor="let record of records">
you can try this way :
<ul class="r " *ngFor="let posto of posti">
<li [ngClass]="posto.id === something ? NewClass : oldclass" >
{{Something.id}}
</li>
</ul>
<tr *ngFor="let record of records">
<td [ngClass]="record.name === 'something' ? 'classForSomething' : 'classForOthers' ">{{record.name}}</td>
</tr>
I have a double repeat going on here, an initial repeat list, and then a second one (for expanding details). What is the best way to show/hide the second repeat ONLY at that index in which clicked at. I have them separated by class name however Angular's Jquery Lite doesn't support the "nextUntil" feature. I'm thinking a ng-class conditional but I don't want based on the Scope (needs to be temp for each expand).
<tr ng-repeat-start="x in calls track by $index" class="{{x.status}}" class="{{x.status}}" ng-click="getCallDetails(x,$index)" my-draggable >
<td><small><i class="fa fa-plus"></i></small></td>
<td style="text-align:center;"><span class="label label-default stat-context {{x.status}}">{{x.statusdesc}}</span></td>
<td>{{x.cust_no}}</td>
<td>{{x.company}}</td>
<td>{{x.name}}</td>
<td>{{x.emp_id}}</td>
<td>{{x.enterdate}}</td>
</tr>
<tr class="callDetails" ng-class="callDetails" ng-repeat-end ng-repeat="y in x.callDetails" >
<td></td>
<td colspan="2">{{y.emp_name}}</td>
<td>{{y.attempt_date}}</td>
<td colspan="2">{{y.note}}</td>
<td class="allAtt-stat">{{y.callstatus}}</td>
</tr>
</tbody>
my simple angular functions
$scope.getCalls = function() {
$http.get("callView.php")
.success(function(response) {
$scope.calls = response;
});
};
$scope.getCallDetails = function(attempt,ind) {
$http.get("callDetails.php?a=" + attempt.action_id)
.success(function (response) {
attempt.callDetails = response;
});
};
With nested ng-repeats, $index would refer to the innermost scope.
If you want to differentiate between parentindex and childindex, child elements can be accessed using $index while parent elements can be accessed either using $parent.$index or using ng-init, parentindex can be initialised to some value.
First approach:
<div ng-repeat="item in items">
<div>{{item.key}}</div>
<ul ng-repeat="val in item.value track by $index">
<li >child index {{$index}} -- parentIndex {{$parent.$index}}</li>
</ul>
</div>
Second approach:
<div ng-repeat="item in items" ng-init="parentIndex=$index">
<div>{{item.key}}</div>
<ul ng-repeat="val in item.value track by $index">
<li >child index {{$index}} -- parentIndex {{parentIndex}}</li>
</ul>
</div>
see the demo for reference