I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.
<div class="carousel" id="slider" style="margin-left: 20px;">
<label class="labelSecurity">Incident Photos</label><br />
<div class="carousel-inner">
<div class="item active" ng-repeat="photo in photoPath">
<img src="{{ photo.path }}" class="img-responsive">
</div>
</div>
<a class="carousel-control right" href="#slider" data-slide="next"></a>
</div>
Then just mark the first one as active, like this:
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">
Related
I am trying to use an ng-repeat inside a Semantic UI accordion. However, once I included ng-repeat inside the div tag with the accordion class, the accordion doesn't open nor close anymore. Clicking it doesn't do anything.
The accordion works properly here:
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
The accordion breaks once I include ng-repeat:
<div ng-repeat="file in files" class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
I need to include the ng-repeat inside the accordion, and I need the accordion to do what it's supposed to do. Any help will be very much appreciated. Thank you!
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="title">
...
ng-repeat and semantic ui needs to be separated
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>
Is there a way to prevent the transition animation for the first page of bricks? I like the animation for resizing and appending but I would like the first page of bricks to appear in place without the animation.
I explored using the layoutComplete event but it gets triggered multiple times.
<div ng-controller="AppsCtrl" masonry masonry-options="{ transitionDuration: '0.4s' }">
<div ng-repeat="app in Apps" class="masonry-brick">
<div id="{{app.id}}" class="sz-card sz-app md-whiteframe-2dp">
<a href="#">
<div class="sz-card-image">
<div class="sz-app-image"><img src="../../app/images/{{app.imageFile}}"></div>
</div>
<div class="sz-card-details">
<div class="sz-card-name">{{app.name}}</div>
<div class="sz-card-settings"><md-icon></md-icon></div>
</div>
</a>
</div>
</div>
<div scroll-trigger="loadMore()" threshold="100"></div>
</div>
Try to use ng-cloak
<div ng-controller="AppsCtrl" ng-cloak ....
https://docs.angularjs.org/api/ng/directive/ngCloak
I need to either hide or disable the href in this code when the user type is a 2 (vm.usertype === 2)
<div class="col-md-4 col-md-4">
<a href="#/newquote">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="row">
<div><h2><i class="fa fa-file-o"></i></h2></div>
</div>
<div class="row">
<div>New Quote</div>
</div>
</div>
</div>
</a>
</div>
I tried -
<div class="col-md-4 col-md-4" ng-disabled="vm.userType=='2'">
but that still enabled the link
You can hide it using ng-hide
<div class="col-md-4 col-md-4" ng-hide="vm.userType=='2'">
or just not setting the href to nothing
<a ng-href="{{ vm.userType=='2' ? '' : '#/newquote' }}">
Your link is still enabled because div as a standard html element doesn't have the option to be enabled or disabled. ng-disable will work file if that would be a button or radio button etc.
Not sure how exactly you imagine a disabled link would look like, but if I would need to display for the end-user a link if value is "vm.userType!='2'", I would use better ng-show="vm.userType=='2'" and this will display it when needed, and hide it otherwise.
I'm losing my mind with this code:
<div class=" col-md-3 col-lg-2 hidden-xs hidden-sm">
<div class="panel-group" id="mainMenuCollapsible">
<div ng-repeat="item in menuItems">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mainMenuCollapsible" href="#collapse_{{ $index }}">
{{ item }}
</a>
</h4>
</div>
<div id="collapse_{{ $index }}" class="panel-collapse collapse" >
<div class="panel-body">
BLA BL
</div>
</div>
</div>
</div>
</div>
</div>
There no chance to get this working. When I click the title of any panels page reloads showing the panel selected but with no visual effects. My code is exactly the same as bootstrap example.
I have all jss in the right place (jquery 2.0.3, bootstrap.min 3.0.2, angular 1.2).
I also tried removing ng-repeat and doing with a single panel with no luck. What am I missing? Many thanks.
Solved my self. It's angular that intercept the route #collapse_X. Using data-target instead of href:
data-target="#collapse_{{ $index }}"
solved perfectly!
Hope this helps someone.