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>
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>
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
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
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 have a view that displays youtube videos. I have 4 screenshots below the embedded player that I would like to use as to select the video to be played. I have used ng-hide/show and ng-style/ng-if in similar situations but I cannot get it to work with this setup.
Plunker
<body ng-controller="MainCtrl">
<div class="col-md-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/1hGkTqOYxEk?rel=0&autoplay=0" style="width:100%;height:500px"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/Z2elVurPk5s?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/2ruHn_9FokI?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/D5zoVoL1_LU?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
</div>
</div>
<br />
<div class="col-md-3">
<h4>1st Video (initial video)</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>2nd Video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>3rd video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>4th video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
I checked your plunk and found that you forgot ng-app.
Then, create a function inside your controller to show/hide videos
var app = angular.module('ngApp', []);
app.controller('MainCtrl', function($scope) {
$scope.currentVideo = 1;
$scope.setCurrentVideo = function(videoNumber) {
$scope.currentVideo = videoNumber;
};
});
And modify html markup to be like
<!-- IFRAMES -->
<iframe class="..." src="..." style="..." ng-show="currentVideo === 1"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 2"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 3"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 4"></iframe>
<!-- BUTTONS -->
<div class="col-md-3">
<h4>1st Video (initial video)</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(1);"/>
</div>
<div class="col-md-3">
<h4>2nd Video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(2);"/>
</div>
<div class="col-md-3">
<h4>3rd video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(3);"/>
</div>
<div class="col-md-3">
<h4>4th video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(4);"/>
</div>
Working plunker.