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.
Related
I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
This is a simple question, but for some reason, I'm not getting the desired result.
Here's a snippet of the code inside my index.html file
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
</div>
<div class="row">
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
What I'm hoping will happen is that the sidebar will take up 1 column and the rest of it will take up the remaining columns. However, when I view the page, the sidebar and the content are shown stacked on top of each other. Am I not allowed to put a ui-view inside a div container?
Try to write 2 columns in same row:
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
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.
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 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/