I have a ng-repeat in my page for rendering all my blog posts, which is working fine. What i'd like to have is that on the first iteration in the repeat to also render some random text that will be next to the first of my posts. As it currently stands the random text is rendered next to all the posts. Is there a way to render it only on the first one?
<div ng-repeat="post in blogs | orderBy:post.timestamp:true">
<div class='row'>
<div class='col-md-4 col-xs-12'>
<h4> Welcome to my blog </h4>
<p> Some random text here </p>
</div>
<div class='col-md-8 col-xs-0'>
</div>
<div class="col-md-4 col-xs-0">
</div>
<div class="col-md-6 col-xs-12 post-{{post.id}} blog-posts-teaser" ng-class="{'lastBlogPost': $last}">
<h4><a ng-href="#/blog/{{returnBlogUrl(post.title)}}" class='blog-title'>{{post.title}}</a></h4>
<p>{{post.content | wordLimit:true:200:'...'}}</p>
<p><a class='read-more' ng-href="#/blog/{{returnBlogUrl(post.title)}}" >Read more →</a></p>
</div>
<div class="col-md-2 col-xs-0">
</div>
</div>
</div>
You can use $first the same way that you're using $last.
<p ng-if='$first'> Some random text here </p>
Use $first inside the ng-repeat-ed block. This variable is set to true in case of the first item of the collection.
Documentation
$first - boolean - true if the repeated element is first in the iterator.
Related
I'm using bootstrap carousel, where it's devided to items.
The first item should always be with active class and the others only class=item.
I'm requesting data, and getting response using angularjs, trying to fill the items with ng-repeat
now my problem is the first item should be class=item active, and get only 4 rows.
The other items should be with class=item and every item get only 4 rows.
The request response has more than 70 rows. i'm stuck here, how can I devide the 70 rows to 4 in the first active class, and the rest in the other items (4 rows in each item)
Carousel code :
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
</div>
Since you need to show 4 response array items in one carousel item, you can loop through your response array using ng-repeat and show only those items whose index is completely divisible by 4.For example you have 20 items in an array that you want to loop through.You can put a condition in your ng-repeat using ng-if to show only 0th,4th,8th,etc.. items i.e. ($index % 4 == 0) and inside that you can can show 0th,1st,2nd and 3rd items for first row , 4th,5th,6th and 7th for 2nd row ...and so on..
Here is a fiddle demonstrating the same.
I have an array of objects. I want to display two object per row. Something like:
<div class="row" ng-repeat="twoObject in objects>
<div class="col-sm-6">{{twoObject(1).name}}</div>
<div class="col-sm-6">{{twoObject(2).name}}</div>
</div>
As you know here {{towObject(1)}} is not valid code.
How can I achieve this in angularJS?
I have fixed this issue using the following trick:
<div ng-repeat="object in objects">
<div class="row" ng-if="$even">
<div class="col col-6">{{object[$index]}}</div>
<div class="col col-6">{{object[$index + 1]}}</div>
</div>
</div>
This is where I got it: Create Row every after 2 item in Angular ng-repeat - Ionic Grid
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
I have simple question but i can't find answer so many hours...
I would like to make something like google search. If it's empty then only one styled input box is on center of the screen, but when typing some text inside, div with filtered ng-repeat is shown, and input is on the top of the page. That input is also filter.
It looks something like this, and that works, but i can't figure out how to change style of div that is parrent to input, based on input value, or more precisely if it is empty or not.
Also any more elegant solution to this would be appreciated.
<div ng-class="header">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-switch on="query">
<div ng-switch-when="">
</div>
<div ng-switch-default>
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
Just use ng-show, ng-hide.
<div ng-class="{HeaderNoInput: query=='', HeaderHasInput: query!=''}">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-hide="query">Nothing to list.</div>
<div ng-show="query">
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
I want to create a paragraph view at my application, where every 5 items display in a block, one under each other, and the next five in the next block;
Example:
<div style="display:inline-block">
<div style="display:inline-block">
<div style="display:block">1.-----</div>
<div style="display:block">2.-----</div>
<div style="display:block">3.-----</div>
<div style="display:block">4.-----</div>
<div style="display:block">5.-----</div>
</div>
<div style="display:inline-block">
<div style="display:block">6.-----</div>
<div style="display:block">7.-----</div>
<div style="display:block">8.-----</div>
<div style="display:block">9.-----</div>
<div style="display:block">10.-----</div>
</div>
</div>
So basically I need to do something ugly like 2 nested iterations, one advancing 5 elements at a time, and the other 1 element at a time.
Or an ng-if directive which is not available at the Angular version that I use.
Technically, you can use one ng-repeat to achieve it (without ng-if). Try something like this:
<div style="display:inline-block" ng-repeat="item in items">
<div style="display:inline-block" ng-show="$index % 5 == 0">
<div style="display:block">{{items[$index+0].content}}</div>
<div style="display:block">{{items[$index+1].content}}</div>
<div style="display:block">{{items[$index+2].content}}</div>
<div style="display:block">{{items[$index+3].content}}</div>
<div style="display:block">{{items[$index+4].content}}</div>
</div>
</div>
Demo: http://jsfiddle.net/kpgbx/