I'm trying to use an ng-repeat on an array of different images. Problem is, these images need to be in-line and do a flip transition. Here's what I had before I decided to use ng-repeat:
`<div class="row">
<div class="col-md-3">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div>
<div class="front">
<img id="firstTrophy" class="trophy locked" src="/img/trophy.png" />
</div>
<div class="back box">
<p class="text">
You're a champion!!!!
</p>
</div>
</div>
</div>
</div>`
And here's the ng-repeat I have now:
(in view.html)
`<div ng-repeat="trophy in trophies track by $index">
<img src="{{ trophy }}" />`
(in controller)
var trophies = [
"img/trophy.png",
"img/trophy.png",
"img/trophy.png",
"img/trophy.png",
"img/trophy.png"];
Thanks for any help you all can provide!
Replace src with ng-src
<div ng-repeat="trophy in trophies track by $index">
<img ng-src="{{ trophy }}" />`
DEMO
Related
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
Our designer has given me jquery flexslider for showing recently viewed items in our project. I need to construct a slider of recently viewed products in angular js, dynamically based on provided flex slider.In my system, recently viewed items are stored as json object( not array).
First of all flexslider is not working, it means sliding feature is not working inside my angular project. I tried to use angular flex slider module from online and tried to iterate my nested object and construct a slider using my data. It is also not working(picture is not showing). My designer asked me to write down a directive, so overall design will not have any problem or any design modification.
Can any of you can help me regarding this
Jquery flex slider dynamic part inside partial as follows
<<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Angular flex slider attempt to solve inside partial
<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
<li>
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</li>
</flex-slider>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
used scripts
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>
Use Flexsilder without Angular and try this code:
var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);
or
$('#slider').flexslider('addSlide', obj[, position]);
Because HTML will be rendering after Flexsilder;
I used angular with mansory, the default usage is :
<div masonry>
<div class="masonry-brick" ng-repeat="brick in bricks">
<img ng-src="{{ brick.src }}" alt="A masonry brick">
</div>
cf : http://passy.github.io/angular-masonry/
But I want to use mansory with a specific case like this :
<div masonry>
<div class="masonry-brick" ng-repeat="brick in bricks">
<div ng-if="date !== brick.publishedAt">
{[{ brick.publishedAt }]}
</div>
<div>
<img ng-src="{{ brick.src }}" alt="A masonry brick">
</div>
</div>
</div>
The specific case "ng-if" should be display an horizontal column with the publish date and after the associated articles display with mansory.
Actually, I cannot find the solution, and I don't knwon if it's possible.
Thank you for your help,
Best regards
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.
I've installed angular-masonry and tried to use it with my single-page Bootstrap view. The images from the ng-repeat directive render but only in a single column. I am not able to figure out why and I am not getting any JS errors.
This is my view:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>
Official Docs:
You still need to use masonry-brick either as class name or element attribute on sub-elements in order to register it to the directive.
Don't you need the masonry-brick class or attribute?
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
or
<div masonry-brick ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
Final sample:
<div class="container">
<div class="row">
<div class="span12">
<masonry column-width="230">
<div class="masonry-brick" ng-repeat="image in results.images">
<img class="asset_image" ng-src="{{ image.url }}" alt="A masonry brick">
</div>
</masonry>
</div>
</div>
</div>