I have a nested ng-repeat as follows:
<div ng-repeat="item_l in list1">
<div ng-repeat="item_f in list2">
{{item_f}} {{item_l}}
</div>
</div>
It gives me about 20 results, but i want only 5 of them. How to do this?
You can use limitTo
<div ng-repeat="item_l in list1">
<div ng-repeat="item_f in list2 | limitTo : 5">
{{item_f}} {{item_l}}
</div>
</div>
DEMO APP
Related
I've a HTML structure which looks like this :
<div class="row">
<div class="md-4">1</div>
<div class="md-4">2</div>
<div class="md-4">3</div>
</div>
<div class="row">
<div class="md-4">4</div>
<div class="md-4">5</div>
<div class="md-4">6</div>
</div>
<div class="row">
<div class="md-4">7</div>
<div class="md-4">8</div>
<div class="md-4">9</div>
</div>
and I've JS :
var abc = [1,2,3,4,5,6,7,8,9]
currently as per my structure I can't directly run ng-repeat as after every 3 records I want starts and ends
I want something similar like
<div ng-repeat="val in abc" class="row" ng-if="$index%3==0">
<div>{{val}}</div>
</div>
but above codes don't work and I know its incorrect way but I want something similar to that
please try with this code:
<div ng-repeat="val in abc track by $index" class="row" ng-if="$index%3==0">
<div>{{val}}</div>
</div>
If you've used lodash before
var arr = _.chunk(abc,3);
//makes your array like [[1,2,3],[4,5,6],[7,8,9]]
<div ng-repeat = "a in arr" class = "row">
<div ng-repeat="b in a" class="md-4">{{b}}</div>
</div>
you can lookup lodash here
I've been searching for the solution for a few days but unable to find one that works. The issue is that this div which has a class ish-container-inner, is linked to a js plugin which works only with this code below:
<div class="ish-container-inner ish-product">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color9">Special Effects</span> <span class="ish-separator">/</span> <span>Ink</span></div>
</div>
<div class="ish-img">
<img src="assets/img/bniinks-003.jpg" alt="Project">
</div>
</div>
</div>
</div>
</div>
But as soon as I'll put *ngFor like below, it won't work. Even with ngIf present:
<div class="ish-container-inner ish-product" *ngIf="products">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item" *ngFor="let product of products">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color7">{{ product.name }}</span> <span class="ish-separator">/</span> <span>Ink</span>
</div>
</div>
<div class="ish-img">
<a href="product-detail.html" class="ish-img-scale" [style.background]="'url('+product.thumbnail+')'">
<img src="{{product.thumbnail}}" alt="Project"></a>
</div>
</div>
</div>
</div>
</div>
I have valid data at this point in products but the plugin is not working for these div elements. I don't know why. Without the ngFor directive. Div is assigned some stylings automatically which are changed by the plugin on scroll i.e.
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax" style="position: relative; height: 629px; margin-top: -99.5455px;" data-initial-top="0">
But if I put ngIf or ngFor directive. It doesn't work anymore and these stylings are not assigned automatically. Awaiting response :)
I have a record that is returned from an angular $resource promise like below.
The record is an array and within each array of record there another variable array. I try displaying in my view like below.
div(ng-repeat="category in categories")
h6
img(src="{{category.ImageUrl}}")
|{{category.Name}}
ul(class="list-unstyled")
li(item in category.CategoryItems)
a(href="#") {{item.Item}} (0)
The problem is , category.CategoryItems returned undefined and empty as a result even though its actually an array of objects. Please how do i print those? Each category has category items of an array type. How do i best achieve this pls?
You didn't use ng-repeat the second time. Try this:
div(ng-repeat="category in categories")
h6
img(src="{{category.ImageUrl}}")
|{{category.Name}}
ul(class="list-unstyled")
li(ng-repeat="item in category.CategoryItems") //ng-repeat added
a(href="#") {{item.Item}} (0)
I used nested ng-repeat in my project some time ago. In my project the requirement was to show all blogs like in snapshot:
To achieve this you can use ng-repeat like in below code:
<div class="panel ">
<div class="panel-body">
<div class="col-sm-12 " ng-repeat="blogBlock in blogs" >
<h2 class="hot-topics-heading">{{blogBlock.year}}</h2>
<div class="blog-year>
<div class="col-sm-6" ng-repeat="months in blogBlock.data">
<span class="hot-topics-heading">{{months.monthName}}</span>
<div class="blog-month" >
<ul class="hot-topics-ul" >
<li class="blogTitle" ng-repeat="blog in months.data">
{{blog.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
In the above code ng-repeat inside the ng-repeat and also inside the ng-repeat.
<div ng-repeat="blogBlock in blogs" >
<div ng-repeat="months in blogBlock.data">
<ul>
<li ng-repeat="blog in months.data"></li>
</ul>
</div>
</div>
I'm attempting to insert a <br/> every nth element to achieve something like this (using ng-repeat and ng-if="!($index % 2)"):
<div class="container">
<div>
<span>1</span>
<span>2</span>
<br/>
<span>3</span>
</div>
</div>
I thought I could mimic how i've used ng-repeat in the past for <ul/> elements, as so:
<div class="container">
<ul ng-repeat="item in list">
<li>{{item}}</li>
</ul>
</div>
which produces a list such as this:
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
Yet when I attempt to do something like this:
<div class="container">
<div ng-repeat="item in list">
<span>{{item}}</span>
</div>
</div>
I get this differing result from the <ul/> usecase:
<div class="container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
</div>
The question is two-fold:
Why does the ng-repeat directive on a <ul/> behave differently
How can I have multiple span elements then a break without wrapping each span in a div?
https://docs.angularjs.org/api/ng/directive/ngRepeat
The ngRepeat directive instantiates a template once per item from a
collection. Each template instance gets its own scope, where the given
loop variable is set to the current collection item, and $index is set
to the item index or key.
In your loop, your 'item' has following local variables: $index, $first, $middle, $last, $even, $odd. Each except $index returns a boolean value that tells you if the item is, for example, $odd. Also take a look at the directive ngClassEven.
ng-repeat acts equal to any tag, maybe the presatantion of ul creates confusion,
look next example:
http://plnkr.co/edit/ig766DNNlQXihNS5ZGdY?p=preview
im separated:
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">
and
<legeng>ul - ng repeat</legeng>
<ul class="example-animate-container" ng-repeat="friend in friends">
Try this.
<div ng-repeat="num in [1,2,3,4,5,6]">
<div>{{num}}</div>
<div ng-if="$index%2">whatever you want</div>
</div>
Result looks something like this.
1
2
whatever you want
3
4
whatever you want
5
6
whatever you want
Update:
If you want to insert a <br> every nth <span> then you can change your HTML to the following:
<div id="container">
<span ng-repeat="item in list">{{item}}
<br ng-if="$index % 2">
</span>
</div>
Tested in Firefox,Chrome,and Internet Explorer the results look like this:
12
34
56
All you have to do is remove the surrounding div elements and then change your html to the following(live preview: http://codepen.io/larryjoelane/pen/qbJXJm). The ng-repeat directive duplicates the number of child elements that are contained within the parent element. The <li> elements in your example do not contain any child elements. In other words <li> elements are child elements of the <ul> element by default. However <span> elements are not child elements of <div> elements by default. You will see similar behavior when you use ng-repeat for other elements like the <table> element and its <tr> and <td> tags.
HTML:
<div ng-app="app" ng-controller="spans">
<div id="container">
<span ng-repeat="item in list">{{item}}
</span>
</div>
</div>
Angular/JavaScript:
angular.module("app", []).controller("spans", ["$scope", function($scope) {
$scope.list = [1, 2, 3, 4, 5, 6];
}]);
And if you want each span to have a line break then apply the following CSS:
#container span {
display: block;
}
The layout I'm trying to achieve is this:
<div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
</div>
Doing this gets me the divs, but how can I add separators between every two items? I feel like Angular should have an easy way to do this.
<div>
<div class="row">
<div ng-repeat="object in objects"></div>
</div>
</div>
I think, you can solve it using a bit of javascript and ng-repeat like
<div>
<div class="row" ng-repeat="array in obj2">
<div ng-repeat="object in array">{{object}}</div>
</div>
</div>
then in your angular controller create a new object called obj2 using the objects array like
$scope.obj2 = [];
while ($scope.objects.length) {
$scope.obj2.push($scope.objects.splice(0, 2))
}
Demo: Fiddle
If i get what you want to do, you could use the $index property of rgRepeat and then use modulo for that index like:
<div ng-repeat="object in objects">
<div>My Content</div>
<div data-ng-show="$index % 3 == 0">My Seperator</div>
</div>