syntax to use binding expression inside href - angularjs

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.

Related

Conditional HTML

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

connect accordian heading and body through href and id

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/

how to make angular-gridster widget data content responsive?

i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.

Angularjs ui.bootstrap Accordion

I found this accordion effect which works very nicely: http://angular-ui.github.io/bootstrap/
But I need the accordion to open differently, so that the content of each accordion-group appears above the accordion-header that opens it. Just wondering if anyone knows a simple way to accomplish this or if I'll have to make my own custom accordion.
The UIBootstrap accordion does not support having the panel content above the title by default.
Below is the accordion-group.html template, which is the HTML for each panel. As you can see there is currently no logic to cover your use case.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
</div>
https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html
However, it should be fairly simply to modify this file to have the title below the content. Simply change this template to have the divs in the order you prefer.
<div class="panel panel-default">
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
</div>
I would suggest taking a fork of the repository on GitHub, so you can make your changes without losing the benefits of version control. http://github.com/angular-ui/bootstrap

Using bootstrap collapse with angularjs

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>

Resources