code work fine when it is single page but when i add in my angular app then code is not working,when user click on accordion header then it link to (#collapse id)
what is wrong with my code when i adding to my app.
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<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="#collapse1">login</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<form>
<input type="text">
<input type="password">
<input type="button" value="login">
</form>
</div>
</div>
</div>
</body>
</html>
If you want to use Bootstrap components like Accordion with AngularJS you'll need to use the specific bindings for them. They can be found (with some example code) at this GitHub project.
You'll need to swap the normal Bootstrap JavaScript file for the one above, and make sure you get the version with the templates included otherwise it won't work out of the box. The file with the templates included has tpls in the file name. There are plenty of examples of how to use this code, but feel free to ask if you have any more problems.
Related
I have Dashboard Page.
It has two columns
One on the left and other on the right side.
Left Div contains Links [Home,Profile]
When user clicks on the link on the left side, "Right DIV" data changes accordingly.
What I have tried
I used Angular directive ng-switch in order to load partials in page.
<div class="col-lg-2">
<h3>MENU</h3>
Resources
<br>
Users
</div>
<div class="col-lg-10 card">
<div ng-switch on="page">
<div ng-switch-when="resources">
<h3>Dashboard</h3>
</div>
<div ng-switch-when="users">
<h3>Users</h3>
</div>
<div ng-switch-default>
<h4>Default</h4>
</div>
</div>
</div>
But now I want to inject partial page with data coming from database.
How can I achieve that.
Please Help.
I am using angular bootstrap's directive for showing accordion in my website. How am I supposed to add a href attribute to this uib-accordion element such that on clicking that element the url changes.
In that way you can do it. There was a need to see what code is put into html file from uib-accordion.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
ABCD
</h3>
</div>
</div>
I am trying to get a nice border around each of an array of uploaded images.
I have tried bootstrap panels and can get them working in Plunker.
However when I try to apply the same code in my angular app it doesn't work - no panel appears:
<div ng-repeat="f in files track by $index">
<div ng-show="f.type.indexOf('image') > -1">
<div class="panel panel-primary">
<img ngf-src="f" class="thumb">
<button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid"
ng-click="cancelPic($index)">Cancel</button>
<br><br>
<p>{{f.name}}</p>
<br>
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
</div>
</div>
I guess there is an obvious reason for this but I have no luck in finding it.
I am using angular 1.4.3 and bootstrap 3.3.1 same as the Plunk
I was missing the .panel-body class, like:
<div class="panel panel-default">
<div class="panel-body">A panel</div>
</div>
It is strange how I didn't need the .panel-body class in the Plunk but when I added it to the app it started working. C'est la vie.
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
I'm really new to AngularJS and I started to make a learning Project and I came to a point where I do not know how to proceed. Behind AngularJS Frontend there is an API which retrieves database data(Like menu elements, product list).
Than I would like to split my template in 2 parts and each should be handled by different Angular Models. What I'm trying it doesn't seems to work. What is the correct way to do this?
-index.html
<head></head>
<body ng-app="appApp">
<div class="container" ng-view=""></div>
</body>
--views/main.html
<div ng-include src="navigation.html"></div>
<div class="jumbotron">
<h1></h1>
<p class="lead"></p>
<p></p>
</div>
<div class="row products">
<div ng-include src="product_list.html"></div>
</div>
<div class="footer">
<p>footer</p>
</div>