I have this simple code. The problem is that "ng-switch-when" is not displaying, which means that column.stage is not being rendered correctly, although I tried displaying {{column.stage}} and it displays the correct value (1 OR 2 OR 3...)
<div class="column span3" ng-repeat="column in columns">
<h1>{{column.title}}</h1>
<div class="row" ng-repeat="shot in shots" ng-switch on="shot.stage">
<h6 ng-switch-when="{{column.stage}}">{{shot.title}}</h6>
</div>
</div>
You need to put ng-switch on="shot.stage" in its own element like:
<div class="column span3" ng-repeat="column in columns">
<h1>{{column.title}}</h1>
<div class="row" ng-repeat="shot in shots">
<div ng-switch on="shot.stage">
<h6 ng-switch-when="{{column.stage}}">{{shot.title}}</h6>
</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>
I have the following table on my page:
<table>
<tr>
<td ng-repeat="Type in Types">
<img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" />
</td>
</tr>
</table>
I want to use bootstrap grid instead of the table. So if there were 3 images on the page I'd have:
<div class="row">
<div class="col-md-4"> </div>
<div class="col-md-4"> </div>
<div class="col-md-4"> </div>
</div>
But since the number of images is dynamic ( although it is never greater then 12), i cannot use fixed numbers in col-md*. So I'd have to do something like this:
<div class="row" ng-repeat="Type in Types">
<div class="col-md-{{12 / Types.length}}">
<img ng-src="../../Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" alt="{{Type.TypeName}}" />
</div>
</div>
But now I have each image in its own row, instead of in a column(one under the another). How do i get them all in one line?
Move ng-repeat to col:
<div class="row">
<div class="col-md-{{width}}" ng-repeat="Type in Types">
{{$index}}
</div>
</div>
Plunk see in full screen mode
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 currently have two rows with 2 SPAN on each one.
What I'd like to do is replace these hardcoded DIV and SPAN with an ng-repeat directive.
My problem is either my 4 SPAN go over 4 rows or they all go on the same one.
Is this feasible with Angular.js?
I read stuff on ng-repeat-start and ng-repeat-end but I'm not sure this could help me here.
Here's a Plunker for you: http://plnkr.co/edit/DEf2JSTFDBvDXusJDsX7?p=preview
Thanks!
EDIT:
I used SPAN in my Plunker example for the sake of simplicity but in my real world problem, I'm using a bootstrap grid and I have, in fact, 2 <div class="col-xs-12 col-md-3"> in each <div class="row">. I hope that clarifies things enough.
Very simple with bootstrap:
<div class="row">
<div class="col-xs-6" ng-repeat="i in [1,2,3,4]">
{{i}}
</div>
</div>
You can even set the width of the wrapper div, if you do not want it to be 100%.
Plunker: http://plnkr.co/edit/J0bKs0BeGW7ltqtnQbNC?p=preview
It is better to use $even and $odd property of ng-repeat.
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$odd">
</span>
</div>
OR,
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$index%2===1">
</span>
</div>
Not nice but works
<div class="row" ng-repeat="i in [1,2,3,4]" ng-if="$even"><span>{{i}}</span><span>{{i+1}}</span></div>
Solution depends on what u want achieve
Another option is to organize your data not in flat array but as array of arrays
[
[1,2],
[3,4],
[5],
]
And make ng-repeat in ng-repeat
<div class="row" ng-repeat="i in myArray">
<span ng-repeat="j in i">{{j}}</span>
</div>
If your html looks like:
<div class="row">
<div class="col-md-3 col-xs-12">
<span>1</span>
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-12">
<span>3</span>
<span>4</span>
</div>
</div>
Then you can consider doing this with ng-repeat[no <br> needed]
<div class="row">
<div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
<span >{{i}}</span>
<span >{{i+1}}</span>
</div>
</div>
Hope it solves your purpose.
With something like the following:
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
</div>
Is there a way I could insert a row every X items (2 in this case since it is col-lg-6)? I'm aware I could probably change my data to be an array and do some logic in the controller. But ideally there should be a way to do this that keeps the view logic out of the controller.
I went with the ng-switch strategy suggested by #Skelly. However I modified it to make it more generic so I could avoid the code repetition for each column by adding a nested loop and referencing $parent.$index:
<div ng-repeat="i in fsdata track by $index" ng-init="rows = [1,2]">
<span ng-switch="" on="$index % rows.length">
<div class="row" ng-switch-when="0">
<div class="col-lg-{{12/rows.length}}" ng-show="fsdata[$parent.$index+$index]" ng-repeat="i in rows">
<h2>Disk: {{fsdata[$parent.$index+$index].name}} <small>({{fs_current[$parent.$index+$index].c_val | bytes}} / {{fs_current[$parent.$index+$index].total | bytes}}) {{fs_current[$parent.$index+$index].percent_used|number:0}}% Used</small></h2>
<div class="chart" max="{{fs_total[fsdata[$parent.$index+$index].name]}}" ts-rickshaw="fsdata[$parent.$index+$index].data"></div>
</div>
</div>
</span>
</div>
What about using $index and the modulus operator?
<div class="row" ng-repeat="(k, v) in idata">
<div class="col-lg-6">
<h2>Network Bytes: {{k}}</h2>
<div class="chart" ts-rickshaw="v"></div>
</div>
<div ng-if="($index != 0) && ($index % 2)">My Even Row</div>
</div>