Actually, I have an array of cars with several information. I want to display the data as following:
I am using ng-repeat with % operator to determine the position, but the problem is that $index % 4 == 0 is also true for $index % 2 == 0 if for example $index is 8 or 16..
How can i solve this?
If you are using bootstrap you just need to use bootstrap smartly to have this kind of view
This is how you can do it:
<div class="row">
<div class="col-md-3" data-ng-repeat="car in cars">
{{ car.name }}
</div>
<div>
Related
I am using html2pdf to export html to pdf in AngularJS the issue I have is that I need to insert a page break after n number of rows.. BDW I am using dir-paginate...
Here is my code:
<tr data-index="{{$index}}"
dir-paginate="(ikey,iitem) in products | itemsPerPage:10">`
I tried different solutions but nothing works
I have to insert a div with class="html2pdf__page-break and repeat the header for example every 10 rows.
Simply take the rest of the division and check if it is a multiplier of 10, like so:
<div ng-repeat="item in items track by $index">
<div ng-if="$index % 10 == 0">
<!-- do something every 10 items -->
</div>
<div ng-if="$index % 10 != 0">
<!-- else do another something -->
</div>
<div>
<!-- do something everytime -->
</div>
</div>
You could do it using a function of something like that to keep it cleaner, but the ideia is the same.
Adapt it to your code, or add a codepen/jsfidle so we could help you better.
Happy coding :)
I come here because after many hours googling, I didn't find a way to use an alternative stop condition for the loops made with the built-in directive : *ngFor.
Actually any *ngFor finish the loop with this condition : index < array.length. I want to know if there is a way to end a loop with another condition like : i < myVariable.
If you wonder why I want to do that, it's because I'm working on a picture gallery working this way :
<div *ngFor="let pic of pics; let i = index">
<div *ngIf="whichRowType(i) == 3">
<small>pic[whichIndex(i)].id</small>
<small>pic[currentIndex + 1].id</small>
<small>pic[currentIndex + 2].id</small>
</div>
<div *ngIf="whichRowType(i) == 2">
<small>pic[whichIndex(i)].id</small>
<small>pic[currentIndex + 1].id</small>
</div>
<div *ngIf="whichRowType(i) == 1">
<small>pic[whichIndex(i)].id</small>
</div>
</div>
In this example, I create a row each 3 pics. I have three types of rows :
- Display one pic,
- Display two pics,
- Display three pics.
The problem is, the index of my first picture on each row is always inferior to the index used to display the row. So if I want to be able to display all my pictures, I have to be able to change my ending condition of my *ngFor.
Thank you very much for your help!
*ngFor provides a last value:
<div *ngFor="let pic of pics; let i = index; let last=last">
<div *ngIf="last">
...
</div>
</div>
See also Implementing ngClassEven ngClassOdd for angular 2
I finally solved my issue an ugly but working way...
Instead of writing another end condition I did make a loop with an array of length that is calculated by a function. I read my other array (the one with my pics) in that loop.
Angular should really make something for that!
Thank you for your help guys!
Example of how to solve it :
<div *ngFor="let galleryIndex of galleryIndexes; let i = index">
<div *ngIf="whichRowType(galleryIndex) == 3">
<small>pics[setCurrentIndex(galleryIndex)].id</small>
<small>pics[currentIndex + 1].id</small>
<small>pics[currentIndex + 2].id</small>
</div>
<div *ngIf="whichRowType(galleryIndex) == 2">
<small>pics[setCurrentIndex(galleryIndex)].id</small>
<small>pics[currentIndex + 1].id</small>
</div>
<div *ngIf="whichRowType(galleryIndex) == 1">
<small>pics[setCurrentIndex(galleryIndex)].id</small>
</div>
</div>
I want to implement a pagination into my large ng-repeat, because the rendering of 200 objects is to slow.
I want to use the bootstrap-ui pagination.
Based on the selected page I will calculate which object will be displayed.
But in my ng-repeat i have no index. So my initial plan doesn't work. for example:
<div ng-if="index >= min && index <= max">
... show this object...
</div>
Can someone help me how to solve this problem?
thank you!
Angularjs provides $index on local scope of each template instance - iterator offset of the repeated element (0..length-1). https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-repeat="(key, value) in myObj">
<div ng-if="$index >= min && $index <= max">
... show this object...
</div>
</div>
I am currently working on an analytics backend web app and am using ng-repeat to show a table for some data I am working with. Is there a way to show the number of total results found when using a filter with ng-repeat? I would like to display this beneath my table.
You can retrieve the filtered data in a var like this :
<div ng-repeat="product in filteredProducts = (products | filter:search)">
So inside your ng-repeat you can do something like filteredProducts.length
You can use the $last variable of ngRepeat
something like this inside your ng-repeat would do the trick:
<div ng-if="$last"> Total results found: {{ $index + 1 }} </div>
note that you should add 1 to the $index since it starts at 0
I'm just starting out with angular. I currently have an json array of products being displayed within an ng-repeat and am looking to add a class to every third product.
Is there a way to write a condition within the repeater that will add a class to the html element when the index%3 is 2
Thanks
Sure!
<div ng-repeat='item in items' ng-class='{third: $index%3==2}'>{{item}}</div>
http://plnkr.co/edit/24Ne1Cyh71INYIKxBCcc
Yes, use the ng-class directive:
<div ng-repeat="item in items" ng-class="{ 'third-elm': $index%3 == 2 }">{{item.value}}</div>
jsFiddle: http://jsfiddle.net/bmleite/dKjz5/