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}}"
I am using AngularJS with ui bootstrap module.
1) What I need is my carousel to change its items one by one. I found a code (by other person) but it's only in jQuery.
Codepen code in jQuery
html:
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
less CSS:
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-3%;
}
&.right{
left:3%;
}
}
.next{
left: 3%;
}
.prev{
left: -3%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
jQuery
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
2) So I want multiple items change one bye one. How to do this in angularJS? Any ideas or directions?
I have created a bootstrap accordian. When i click an accordian heading, it should show the body contents. I am providing the values dynamically(scope variable) for href and id attributes using angularjs.
But this is not working??
<div class="panel-group col-lg-3" style="background-color:#505054;height:450px" id="accordion">
<div class="panel" style="background-color:#505054;color:#C1C1C1;border-bottom: 1px solid #eee;">
<h6>Clear Filter</h6>
</div>
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;" ng-repeat="prdlines in detpline">
<div class="panel-heading">
<h6>
<div class="accordion-toggle" style="cursor:pointer" data-toggle="collapse" data-parent="#accordion" ng-click="plfilter(prdlines.id)" ng-href="{{prdlines.productline_name}}">{{prdlines.productline_name}}</div>
</h6>
</div>
<div ng-attr-id="{{prdlines.productline_name}}" class="panel-collapse collapse">
<div class="panel-body">
<ul id="style-3" style="height:200px; overflow: auto;cursor:pointer">
<li class="panel-title" ng-repeat="prd in detprd"><a ng-click="cfilter(prd.product_name)"><h5>{{prd.product_name}}</h5></a></li>
</ul>
</div>
</div>
</div>
</div>
What is the syntax problem?
For accordian you don't need to specify href and id. Use UI bootstrap.
https://angular-ui.github.io/bootstrap/#/accordion
http://embed.plnkr.co/3y0Rq1/
In my testing phase I want to test a header element h2 in html
<a class="item-content" ng-href="#/lead/details/1/" target="_self" href="#/lead/details/1/">
<div class="row" style="height: 35px; width: 100%; margin-left:-10px; margin-top: -10px; margin-right: 0px; padding: 0px">
<div class="col col-top col-67">
<h2 class="ng-binding">HAL 9000</h2>
<br>
<h4 style="font-weight: normal; margin-top: -15px" class="ng-binding">Jupiter Feb 10, 2025 </h4>
</div>
<div class="col col-center col-10 col-offset-25" style="margin-right: -10px">
<a href="tel:9876543210" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-telephone-outline" style="font-size: 36px"></i>
</a>
</div>
<div class="col col-center col-20" style="margin-left: 15px">
<a href="mailto:hai#spaceodyssey.com?Subject=Hi;" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-email-outline" style="font-size: 36px;"></i>
</a>
</div>
</div>
</a>
I wanted to test that the "Hal 9000" is visible or not could someone help me to find it in my protractor testing process
in my protractor I used
var child = element(by.css('.col col-top.col-67')), element(by.css('.ng-binding'));
it('20 should update 2nd lead with proper data',function(){
expect(child.getText()).toBe('HAL 9000'); });
and i get an error message in my terminal as
NoSuchElementError: No element found using locator: By.cssSelector(".col col-top.col-67")
someone help me to fix this problen
for a more precise locator, you can always use:
element(by.css('.col.col-top.col-67 h2');
I'm trying to include the below bootstrap collapsible panel in my angular application. However, when I click on "Expand", angular seems to see href="#collapseOne" and then redirects to the home page instead of collapsing the panel. My routing looks like this, and I think the otherwise({redirectTo: '/home'}); is causing the problem. Any suggestions?
angular.module('App')
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).
otherwise({redirectTo: '/home'});
}]);
The panel-
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
As mentionned in a similar question Here, simply change your href by the data-target attribute
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
You can use the accordion directive from AngularJS UI Bootstrap that builds on top of twitter bootstrap the collapse directive.
example:
<accordion >
<accordion-group heading="Static Header, initially expanded" is-open="true">
This content is straight in the template.
</accordion-group>
</accordion>
Live example: http://jsfiddle.net/choroshin/U89bW/3/
I had the same issue, and I didn't want to add an additional library beyond bootstrap. As recommended, you can usedata-target="#your-collapsing-element", removing the href attribute completely.
The basics
To make a panel collapse you need:
On the element used to trigger collapse:
data-toggle="collapse" data-target="#my-collapsing-element"
On the element that collapses:
id="my-collapsing-element"
On the element wrapping both the "trigger" element and the collapsing element:
class="panel"
Putting it all together
You can optionally add parent elements to make it part of a group, and add add the css classes "collapse in" to the collapsing element to make its default state closed. A full example:
<div id="accordion">
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
Heading 1
</a>
<div id="collapse1">
Content for panel 1
</div>
</div>
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
Heading 2
</a>
<div id="collapse2" class="collapse in">
Content for panel 2
</div>
</div>
</div>
You can get better button behaviors by using a <button> element rather than an <a>. Overriding bootstrap's styling for .panel can be done by adding your own styling for the panel css class.
<div class="panel its-my-panel">
.panel.its-my-panel {
margin-bottom: 0;
background-color: transparent;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.my-panel-heading {
cursor: pointer;
}
/* Overrides for .panel--theonly required bootstrap class */
.panel.my-panel-overrides {
margin-bottom: 0;
background-color: transparent;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
Collapsible Group 1</a>
<div id="collapse1" class="collapse in">
Content for panel 1
</div>
</div>
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
Collapsible Group 2</a>
<div id="collapse2" class="collapse">
Content for panel 2
</div>
</div>
<div class="panel my-panel-overrides">
<a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
Collapsible Group 3</a>
<div id="collapse3" class="collapse">
Content for panel 3
</div>
</div>
</div>
Change all href in order to expand-collapse to data-target.
data-target and id of the div to be expanded and collapsed should not contain hyphen.
Click the buttons below to show and hide another element via class changes:
collapse hides content
collapsing is applied during transitions
collapse.in shows content
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
check this example below.
Bootsrap Example
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>