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>
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>
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>
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 am using ngRepeat angularjs to fill out a grid in bootstrap. The grid needs periodic clearfixes.
So, for example, if the grid is:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Is this accomplishable with ngRepeat? It seems that a structure like:
<div class="container">
<div class="row">
<div data-ng-repeat="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Couldn't get the clearfixes in there with the iterator.
Angular has an index property called $index when you're inside of the ng-repeat directive. You could use this to display your clearfix div when it is needed. If you want to shortcut it even more, you could use the $even or $odd (in your case, $odd) property to display it every two instances.
Combining the special ng-repeat-start and ng-repeat-end directives, you could do something like this to get at your required result:
<div class="container">
<div class="row">
<div ng-repeat-start="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
<div ng-repeat-end ng-if="$odd" class="clearfix visible-sm-block"></div>
</div>
</div>
More Info: ng-repeat, ng-if
Here's a Plunker to show it's working: PLUNKER
I have coded this:
.row {
display: table-row;
}
.table {
display: table;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">x</div>
</div>
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
</div>
However the that does the ng-repeat causes problems when it's used inside a display: table-row.
What I really need to do is to have something that will do the repeat and have only the things I want repeating show up. In this case the with ng-repeat in it appears in the dom. I did think of using something like a and putting the ng-repeat in that but I am not sure this is syntactically correct when I'm inside a that's a type of display: table.
Is there a way to do this with angular?
Sure. Assuming you're using Angular 1.2 or later, see ng-repeat-start and ng-repeat-end.
So this:
<div data-ng-repeat="x in modal.xx">
<div class="row">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row">
<div class="cell">z</div>
<div class="cell">z</div>
</div>
</div>
would become this:
<div class="row" data-ng-repeat-start="x in modal.xx">
<div class="cell">y:</div>
<div class="cell">y</div>
</div>
<div class="row" data-ng-repeat-end>
<div class="cell">z</div>
<div class="cell">z</div>
</div>