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
Related
I have this code to open a modal inside a ng-repeat. The modal is working fine as long as I hardcode the Id. However I would like to open another modal if it's for record 2, 3, etc.
<div class="w3-container w3-center w3-yellow">
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('{{ x.Id }}').style.display='block'"
class="w3-button">Meer foto's</button>
</div>
<!-- The Modal -->
<div id="{{ x.Id }}" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('1002').style.display='none'"
class="w3-button w3-display-topright w3-red">×</span>
<div class="w3-row-padding w3-margin">
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_1 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_2 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_3 }}" style="width:100%">
</div>
</div>
</div>
<div class="w3-row-padding w3-margin">
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_4 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_5 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_6 }}" style="width:100%">
</div>
</div>
</div>
</div>
</div>
</div>
onclick is not accepted however I can't make the ng-click working either. Can someone please give me some hints how I can solve this?
First don't use onclick if you are using angularjs, use ng-click.
Second don't hide elements with pure javascript/jQuery by manipulating DOM elements, you are using AngularJS do it AngularJS way that being ng-show.
For simple purposes I will say you have 2 buttons one will show something one will close something. So on first button (open button) you should use ng-click="isShowing=true" and on second one (close button) will haveng-click="isShowing=false"
Then use ng-show="isShowing" which will set div to visible/hidden on whatever element you want to show. Keep in mind as long as button is not pressed isShowing property doesn't exist it will be undefined - falsy and it will not show, after click it will be set to true and show the div, then if you click on other button for closing it should set it to false and hide the div.
On your particular example on button that should show modal:
<button ng-click="isShowing=true" class="w3-button">Meer foto's</button>
and then on modal div:
<div id="{{ x.Id }}" ng-show="isShowing" class="w3-modal">
and in the end closing span:
<span ng-click="isShowing=false" class="w3-button w3-display-topright w3-red">×</span>
Keep in mind if you have some bad CSS styles this can interfere with the showing/hiding. And I would recommend this read as I can see you come from vanillaJS/jQuery background:
https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers
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'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?
Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?
<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
<li data-ng-repeat="story in vm.stories" class="grid">
<!--Carousel-->
<slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
<div ng-repeat="image in story.images">
<img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle">
</div>
</slick>
</li>
</ul>
Have you tried this awesome carousel . You can change the perspective to make images as a grid.
Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.
<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
<div>
<div
class="cards-wrap"
angular-grid="vm.stories"
ag-grid-width="400"
ag-gutter-size="20"
ag-id="gallery"
ag-scroll-container="'#content-scroller'"
ag-infinite-scroll="vm.loadMoreStories()"
performantScroll="true">
<div class="card" ng-repeat="story in vm.stories">
<slick fade="true" dots="true">
<div ng-repeat="image in story.images">
<img data-lazy="{{ image.filename}}" aria-label="Image">
</div>
</slick>
<div class="inside">
<h3>{{story.title}}</h3>
<div class="description">{{ story.text }}</div>
</div>
</div>
</div>
<div class="loading-more-indicator" ng-show="vm.loadingMore">
<md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
</div>
</div>
</md-content>
<div>
Here is the official example in the documentation about the angular-ui-bootsratp carousel.
But I could not replicate it in my own case, as the slide.active is not working.
<uib-carousel interval="1000" no-wrap="false">
<uib-slide ng-repeat="slide in slides" active= "slide.active">
<div class="col-md-8 col-md-offset-2 text-center"><h3>{{ slide.Title }}</h3></div>
<img ng-src="{{slide.Image }}" style="margin:auto;">
<div class="carousel-caption">
<div class="col-xs-7">
<p>{{ slide.Content }}</p>
</div>
</div>
</uib-slide>
</uib-carousel>
Also where do they set up the slide.active value at the first place in the documentation? I did not see they set it up in the controller. Do I need to set it up? Am I missing anything?
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>