I have using carousel in my AngularJS App. I want change id of carousel each iteration but it is not working Please tell what did wrong?
<div ng-repeat="data in details">
<div class="carousel" id="{{data._id}}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in data.photos">
{{$index}}
<a target="_blank" ui-sref="PhotoUpload">
<img src="{{ photo }}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
</a>
</div>
</div>
<a class="left carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
First carousel image slide are working but after that second carousel images are not working if i click prev and next button first carousel images changing. but second images
Please help me.
I usually handle dynamic id values like this:
[attr.id]="data._id"
and for data-target
[attr.data-target]="'#' + data._id"
There must be possibilities your IDs are same for all elements. Please append {{$index}} within ID.
Try below snippet
id="{{data._id}}_{{$index}}"
Related
I am creating a carousel that displays images with some meta data. On md and lg screens I want the meta data to appear to the right, and on smaller screens I want it below the image, which is working fine using col-md-8 / col-md-4
Here is my carousel code:
<uib-carousel active="active" interval="0" no-wrap="noWrapSlides" template-url="/Scripts/MainClient/views/cwCarouselTemplate.html" style="height:100%">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<div class="row">
<div class="col-md-8 " ng-style="{height: hackheight}" id="img-div">
<div style="padding:10px; height:100%;" class="black-bkgd">
<span class="helper"></span><img class="img-responsive " ng-src="{{slide.image}}" style="vertical-align:middle; display:inline-block">
</div>
</div>
<div class="col-md-4">
Here's where the meta data goes go!
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</uib-carousel>
The problem I have is regarding the right hand control - it is positioned to the right of the whole carousel, and I want it right relative to the col-md-8 div (so it appears over the right hand side of the image, not over the meta data). It works if I set right to be 34% on the control, but this then doesn't work on xs/sm screens (the control is in the middle of the image).
I can get it to the right position on either xs/sm screens (with right:0) OR on md/lg screens (with right:34%) but not on all screens at the same time!
One idea I had is to add a <span class="hidden-xs hidden-sm" style="width:34%"></span> to the right to push the control over on larger screens but I can't get it to work - the span just stacks with the carousel control.
Here's the template I'm using:
<div class="carousel">
<div class="carousel-inner" ng-transclude></div>
<a role="button" href class="left carousel-control" ng-click="prev()" ng-class="{ disabled: isPrevDisabled() }" ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">previous</span>
</a>
<a role="button" href class="right carousel-control" ng-click="next()" ng-class="{ disabled: isNextDisabled() }" ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">next</span>
</a>
<!--
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
-->
</div>
Many thanks for any help
You could wrap your buttons in a absolute positioned col-md-8 to achieve the result.
If the element height remains an issue, you could provide a plunkr of your code, so we can look into that.
I am using UI Bootstrap Carousel and need to do some customization in it so that user have access of configuring options such as text color, navigation show/hide, etc....
For this i have used their carousel html template and added some ng-class for display block/none and some other ng-style but those are not working and do not have any effect over the same.
These are working fine if i am using the same on page where carousel markup written.
Refer to plunker to replicate issue
Carousel Plunker
Template HTML
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
<div class="carousel-inner" ng-transclude></div>
<a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1" ng-class="{'dispNone': carousel.arrow}">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">previous</span>
</a>
<a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1" ng-class="{'dispNone': carousel.arrow}">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">next</span>
</a>
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
</div>
You can use $parent in the template as you are having different scopes. Like
$parent.navArrow
I want to develop an app using images as my menu button, however, i want to blur the other images that was not clicked or change the color of the image that was on clicked. please help me out on this, I'm new in using angularjs
System Status
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">System<br>Settings</p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">Time and Date<br></p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">Firmware<br>Update</p>
</a>
</div>
<div class="col-sm-2 col-xs-6">
<a class="thumbnail setting_subcatalog_icon" href="#">
<img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
<p class="subcatalog_name_h">USB<br>Devices</p>
</a>
</div>
</div>
I hope I understand your problem correctly. Please have a look at this Codepen
Explanation: In ng-class I am giving a condition if toggleObject.item value is equal to index value of the list, then set a class to image-active. In controller i have initialised toggleObject.item to -1 so if you not click the item condition will not fulfil and image-active class will not apply.
CSS:
.image-active{
filter: blur(0px) !important;
-webkit-filter: blur(0px) !important;
}
.image-deactive{
filter: blur(20px);
-webkit-filter: blur(20px);
}
HTML:
<img class="image-deactive" ng-class="{'image-active' : toggleObject.item == $index}" ng-src={{client.image}} alt="">
CONTROLLER:
$scope.toggleObject = {item: -1};
I am using UI Bootstrap 14.3 and I am trying to have an image within the NavBar to dropdown a menu when clicked.
I have implemented the below code however the menu pops up at the top of the page and is not aligned under the image.
Does anybody have any suggestions to fix and improve this below solution?
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle style="padding-top: 0px; padding-bottom: 0px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="position: relative;top: 10px;float: left; left: -5px;height:100%;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
</ul>
</span>
By removing the span and moving uib-dropdown to the li element. It aligned perfectly
<li uib-dropdown style="padding-left:0px;margin-left:0px;">
<a href id="simple-dropdown" uib-dropdown-toggle class="profile-image dropdown-toggle" style="padding-top: 10px; padding-bottom: 10px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="heigth:30px;width:30px;margin-left:0px;padding-left:0px;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
<li>
</span> Sponsored
</li>
<li>
</span> Admin Console
</li>
<li>
</span> Logout
</li>
</ul>
</li>
I am very new to ionic but I keep coming across issues, the longer I am working with it. Usually very small issues (luckily), but they are enough to halt me in my tracks.
Anyhow, I have a view that has some images and horizontal scroll content. But if I want to scroll vertically on this app, it just won't work. I have tried adding
<ion-pane overflow-scroll="true">
But to no avail my issue still persist. Does anyone else have any further feedback what I should be looking in to?
<ion-view title="Home" hide-back-button="true">
<ion-pane overflow-scroll="true">
<div class="home-wrapper">
<!--start featured banner-->
<div ng-controller="testCtrl">
<ion-slide-box delegate-handle="theSlider" show-pager="true" does-continue="true" auto-play="true">
<ion-slide ng-repeat="feat in featured">
<h2>{{feat.name}}</h2>
<img ng-src="{{feat.heder_img}}" style="width:100%" />
</ion-slide>
</ion-slide-box>
</div>
<!--end featured banner-->
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<a ng-repeat="bar in bars" href="#/venue/{{bar.id}}"><hcard index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}"></hcard></a>
</hscroller>
</div>
<div ng-controller="restCtrl">
<h4>Top Rated Restaurants</h4>
<hscroller>
<a ng-repeat="restaurant in restaurants" href="#/venue/{{restaurant.id}}"><hcard index="{{$index}}" desc="{{restaurant.name}}" image="{{restaurant.profile_pic}}"></hcard></a>
</hscroller>
</div>
<!-- upcoming 3 events -->
<div ng-controller="test">
<h4>Upcoming Events</h4>
<div class="list">
<div class="item item-divider">Today</div>
<a class="item item-avatar" href="#">
<img src="http://ionicframework.com/img/docs/slimer.jpg">
<h2>Africa Oye</h2>
<p>Come and join our festival</p>
</a>
<a class="item item-avatar" href="#">
<img src="http://ionicframework.com/img/docs/slimer.jpg">
<h2>Creamfields</h2>
<p>Come and join our festival</p>
</a>
</div>
</div>
<!-- upcoming 3 events -->
</div>
</ion-pane>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" ng-click="#">
Home<i class="icon ion-android-home"></i>
</a>
<!-- incluir link da categoria aqui, para ir a venue.html-->
<a class="tab-item" ng-click="#" href="#/home">
Categories<i class="icon ion-ios-list"></i>
</a>
<a class="tab-item" href="#">
Events<i class="icon ion-calendar"></i>
</a>
</nav>
</ion-view>
Simply replace ion-pane with ion-content. ion-pane won't scroll by default because
.pane{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
This will definitely prevent your divs from being scrolled.