I have this very simple ng-repeat that creates accordions. I removed the in class from it so they are closed. But what I actually want it to open the first and close all the others.
Any idea how can I do this?
<div ng-repeat="ticket in tickets">
<div class="panel-group" id="accordion{{ticket.TICKET_ID}}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion{{ticket.TICKET_ID}}" href="#collapse{{ticket.TICKET_ID}}">{{ticket.TICKET_ID}} - {{ticket.TITLE}} ({{ticket.TICKET_STATUS_DESCRIPTION}})</a>
</h4>
</div>
<div id="collapse{{ticket.TICKET_ID}}" class="panel-collapse collapse">
<div class="panel-body">
{{ticket.DESCRIPTION}}
<hr>
<span><b>Contacted by: </b> {{ticket.TICKET_TYPE_DESCRIPTION}}</span><br>
<span><b>Category: </b> {{ticket.TICKET_CATEGORY_DESCRIPTION}}</span><br>
<span><b>Related to: </b> {{ticket.TICKET_TAG_DESCRIPTION}}</span>
</div>
<div class="panel-footer">{{ticket.CREATED_BY}} - {{ticket.CREATION_DATE}}</div>
</div>
</div>
</div>
</div>
You could use ng-class to selectively add the collapse class, which stops the first panel collapsing :
<div id="collapse{{ticket.TICKET_ID}}" class="panel-collapse" ng-class="{ 'collapse': $index !== 0 }">
<div class="panel-body">
...
I've knocked up an example here:
https://codepen.io/anon/pen/NzMexQ?editors=1010
I have created a nested accordian bootstrap panel. On clicking the parent(top most) panel heading - dropdown works fine but on clicking the child(sub panel heading) panel heading-dropdown wont work. I am retriving panel contents(sub panel heading and body) using angular $http.get rest api.
In this case, i think i did a mistake in syntax while linking the panel heading and panel body with its href and id attribute values( ng-href="{{productline_name}}" and id="{{productline_name}}" ).
Below code is placed inside top most panel body to create nested panel
<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;">
<div class="panel-heading">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">PRODUCT</div>
</h6>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li class="panel-title"><a ng-click="cfilter('all')"><h5>All Records</h5></a></li>
<li ng-repeat="pline in detpline" class="panel-group" id="accordion2">
<div class="panel" style="background-color:#505054;color:white;border-bottom: 1px solid white;">
<div class="panel-heading" ng-click="plinefunc(pline.productline_name)">
<h6>
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" ng-href="{{productline_name}}">{{pline.productline_name}}</div>
</h6>
</div>
<div id="{{productline_name}}" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li class="panel-title" ng-repeat="prd in detp"><a ng-click="cfilter(prd.product_name)"><h5>{{prd.product_name}}</h5></a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Can any one help in this? what is the correct syntax to use to link panel heading and panel body via binding expresion?
Note: I am using binding expression for linking only to avoid opening all other sub panel heading contents on-clicking one of the sub panel heading.
I am pretty new to Ionic Framework and the entire hybrid platform.
I have developed a very simple application by using too many tutorials over the internet and the application is working perfectly as expected except the home page.
I have an overall page view that has an ion-content and then there are multiple ion-scroll on the page.
The problem is the scrolling doesn't work as the normal native Android/iOS application.
Can anyone help with this?
Attached below is the full code:
<ion-view ng-init="LoadPage()">
<ion-content ng-show="contentloading" scroll="true">
<ion-refresher pulling-text="Pull to refresh" on-refresh="LoadPage()" >
</ion-refresher>
<div class="row-no-padding">
<div class="row row-no-padding row-center" style="padding-left: 5px;">
<div class="col-33 col-center">
<h5 class="latest-news headingStyle" data-fittext data-fittext-max="12px">Latest News</h5>
</div>
<div class="col col-center">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<h4 class="{{FontDetails(1)}}" style="margin-left: 5px;word-break: break-all;white-space:nowrap;overflow:hidden; color:#bb1515;font-size:12px;" ng-bind-html="item.title | unsafe"></h4>
</ion-slide>
</ion-slide-box>
</div>
</div>
</div>
<div class="row-no-padding">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<div class="row-wrap">
<div class="col" style="background: url({{item.thumbnail_images.medium.url}}) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;min-height: 200px;height:250px;max-height:300px;z-index: 1;">
</div>
<div style="background:black;position:absolute;opacity: 0.5;filter: alpha(opacity=50);height:auto;bottom:0%;width: 100%;overflow:hidden;z-index:2; vertical-align: top;" class="col">
<h4 class="latest-news-add {{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h4>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
<!-- </div>
</div>-->
<div class="row-no-padding">
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Gujarat'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px; overflow: auto;white-space: nowrap; overflow-y: scroll; position: relative;">
<div class="col" >
<ion-scroll direction="x" scroll-outside="true" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in gujarat">
<img on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class="{{FontDetails(1, 0)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
<!--<div class="col">-->
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Politics'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in politics">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<!-- <div class="col col-34" style="text-align: center;margin-bottom: 10px;background-color: firebrick;vertical-align: middle;text-align: center;color:white;font-family: HouseGothicHG23Text-Bold;font-size:1.30em;">
Technology
</div>-->
<div class="col col-center">
<h5 class="latest-news {{FontDetails(1)}} categoryHeading ">{{'Technology'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in technology">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-list>
<div ng-repeat="item in FooterItems" ng-if="(item.MenuOption !== 'Home' || item.MenuOption !== 'Favorite')" style="margin-bottom: 10px;">
<ion-item style="border: 0px!important;" class="item-stable item item-icon-left home-item-footer item-icon-right {{FontDetails(1)}}" ng-click="toggleGroup({{item.group}},'{{item.link}}')" ng-class="{active: isGroupShown({{item.group}})}">
<i class="icon"><img src="img/{{item.link}}.png" style="width:20px;height:20px;"/></i>
{{item.MenuOption| unsafe | translate}}
<i ng-class="isGroupShown({{item.group}}) ? 'ion-chevron-down' : 'ion - chevron - right'" class="icon" style="font-size:1em;"></i>
</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown({{item.group}})" style="padding-left:1px;padding-top:1px!important">
<!-- <div class="row row-no-padding">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapper"
ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(0)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>-->
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</ion-item>
</div>
</ion-list>
</div>
</div>
</ion-content>
You need to make sure you're declaring the height and width of each <div> you're scrolling. From the ion-scroll docs:
Basic usage:
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
</div>
</ion-scroll>
Note that it's important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas.
I am trying to make the entire panel-heading click-able. I tried wrapping the div with some css.
plunkr
#box {
padding: 10px;
display: block;
width: 100%;
}
HTML:
<a id="box">
<div class="panel-heading" toggle target="collapse{{$index}}">
<h4 class="panel-title">
<span style="font-size:12px">Name :</span> <span ng-click="selectJob(currentItem, $index)">{{currentItem.JobName}}</span>
</h4>
</div>
</a>
Move ngClick to a element:
<a id="box" ng-click="selectEmployee(employee, $index)">
<div class="panel-heading" toggle target="collapse{{$index}}">
<h4 class="panel-title">
<span>{{employee.firstName}} {{employee.lastName}}</span>
</h4>
</div>
</a>
Demo: http://plnkr.co/edit/nOGHHQWxT5lEKbulmGtJ?p=preview
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>