ng-repeat changing position left to right - angularjs

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>

Related

Angular Table CSS structure with 3 level

Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>

Insert a row with two columns every four ng-repeat values

I have the next code in Html and AngularJS:
<div class='row'>
<div class='col-md-6' ng-repeat='post in news'>
<div class='post-content'>{{ post.title }}</div>
</div>
</div>
Now, what I need is to push a row with two columns every four posts.
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
How do I do it in AngularJS?
The DOM result what I'm looking for is:
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
...
essentially you need to be using the built in $index which keeps track on the index it is currently on. Every fourth item implies it should be divisible by four. You also need an ng-if statement to determine wether a dom snippet should be added on said item. Also this calls for the use of the ng-repeat-start instead of ng-repeat. Its seldom used but for this purpose it should work. Code below :
<div class='row' ng-repeat-start="post in news" >
<div class='post-content'>{{ post.title }}</div>
</div>
<div class="row" ng-repeat-end ng-if="($index +1 ) % 4 === 0" >
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>

Angular JS - How to close and start DIV out of ng-repeat

I have one div as row and 4 div as column. I want to close row div after 4 cloumn div.
<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>
<div class="row">
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
<div class="clo"></div>
</div>
Now in ng-repeart
<div class="row">
<div class="col" ng-repeat="x in values">
{{x.name}}
</div>
<div ng-if="$index % 4==0">
<div class="clearfix"></div>
</div>
<div class="row">
</div>
it's not working for me
I also tried this as refrence but it only add clearfix div only. Not close the div class="row"> and not start again div class="row">
The clearfix solution assumes you are using Bootstrap CSS. If you're not then you'll have to grab the clearfix class from Bootstrap.css.
If you are including Bootstrap, and looking to use Bootstrap to do the layout then you can use:
<div ng-init="a = [1,2,3,4,5,6,7,8]"> <!-- sample data !-->
<div class="row">
<div ng-repeat="product in a">
<div class="clearfix" ng-if="$index % 4 == 0"></div>
<div class="col-sm-3">
<h2>{{a[$index]}}</h2>
</div>
</div>
</div>
</div>
Here's the demo: http://plnkr.co/edit/ibRsIfazxea2KpGmUg42?p=preview
Note I've reworked the answer from https://stackoverflow.com/a/32358013/1544886 to your requirements
Another option (based on https://stackoverflow.com/a/30259461/1544886)
<div ng-repeat="product in a" ng-if="$index % 4 == 0" class="row">
<div class="clearfix" ng-if="$index % 4 == 0"></div>
<div class="col-sm-3">{{a[$index]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 1)">{{a[$index + 1]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 2)">{{a[$index + 2]}}</div>
<div class="col-sm-3" ng-if="a.length > ($index + 3)">{{a[$index + 3]}}</div>
</div>
You likely don't need the clearfix div, but as you have indicated in the comments that you want it as well, I have included it above.
Change it below like this: $index is available inside your ng-repeat and not outside.
<div class="row">
<div class="col" ng-repeat="x in values">
{{x.name}}
<div ng-if="$index % 4==0" class="clearfix"></div>
<div class="row">
</div>
</div>
</div>

Using Twitter Bootstrap's .row element with ng-repeat

I have the following snippet in my AngularJS app:
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
This will generate a div element with the class col-sm-6 for every proverb in my proverbs array. My intention is to display two columns whenever a screen is big enough.
Despite not using Bootstrap's .row element, the above snippet works exactly as intended.
The question is, how could I include a .row element that would only appear every second iteration of ng-repeat so that I would get the following end result:
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
Also, given that whenever the sum of the spans of .col elements in Bootstrap is greater than 12 the next element gets pushed down, is there even any reason to use the .row class other than to guarantee a new row is generated before all columns are completely filled?
If you don't need the .row then you could do this
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
<ng-show="$index % 2 == 0" br/>
</div>
</div>
</div>

Bootstrap columns aren't lining up

I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>

Resources