I am trying to toggle my accordion list open and close from a button but it does not work.
Any ideas as to why the event is not firing?
This code --> is-open="$parent.opened" is suppose to toggle the is-open element true anf false thereby opening and closing accordion elements
Thanks
HERE IS MY CONTROLLER
var app = angular.module('app', ['ui.bootstrap']);
app.controller('programcontroller', ['$scope',function ($scope) {
$scope.currentPage = 1;
$scope.opened = true;
}
}]);
HERE IS MY WEB PAGE BODY
<body>
<div ng-controller="programcontroller">
<button class="btn btn-default btn-xs glyphicon-plus" ng-click="togglegroup()">Expand</button>
<div data-ng-repeat="m in results">
<div class="container panel-heading">
<accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="false">
<accordion-group is-open="$parent.opened">
<accordion-heading>
{{m.ALabel}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': opened, 'glyphicon-chevron-right': !opened}"></i>
</accordion-heading>
<p>The body of the accordion group grows to fit the contents</p>
<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
</accordion>
</div>
<hr />
</div>
</div>
</body>
Ok, tell me if that is what you want, on click on the button, bodies are hiding while heading are still visible
<body>
<div ng-controller="programcontroller">
<button class="btn btn-default btn-xs glyphicon-plus" ng-click="opened = !opened">Expand</button>
<div data-ng-repeat="m in results">
<div class="container panel-heading">
<accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="false">
<accordion-group is-open="$parent.opened">
<accordion-heading>
{{m.ALabel}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': opened, 'glyphicon-chevron-right': !opened}"></i>
</accordion-heading>
<div ng-show="opened">
<p>The body of the accordion group grows to fit the contents</p>
<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
</accordion-group>
</accordion>
</div>
<hr />
</div>
</div>
</body>
Related
My scope looks something like this
$scope.audit = [{
"specification": "Test1",
"username":"user1",
"lastname":"lastname1"
},
{
"specification": "Test1",
"username":"user2",
"lastname":"lastname2"
},
{
"specification": "Test2",
"username":"user1",
"lastname":"lastname1"
},
{
"specification": "Test2",
"username":"user2"
"lastname":"lastname2"
}]
I groupBy specification and have two buttons as filters, username and lastname, which can be clicked to filter the data. The specification and the filters are part of accordion heading.
Now when I click on specification heading, the panel opens up well. But how do I open an accordion using filter buttons? And if the panel is open, how can I keep it open and not toggle the data?
HTML
<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
<accordion close-others=false>
<accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | orderBy: 'specification' | groupBy: 'specification'">
<accordion-heading>
<i class="glyphicon" ng-class="{'glyphicon-chevron-down': open, 'glyphicon-chevron-right': !open}"></i>
<b>{{spec}}</b>
<div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();" >
<div class="btn-group pull-right" >
<button data-style="slide-right" ng-click="Activate(this,'username')" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Username
</button>
</div>
<div class="btn-group pull-right" >
<button data-style="slide-right" ng-click="Activate(this,'lastname')" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Lastname
</button>
</div>
</div>
<accordion-heading>
<div data-ng-repeat="val in value">
{{val.username}} -- {{val.lastname}}
</div>
<accordion-group>
<accordion>
</div>
With my current approach on clicking the Activate(), I set the value of open to true, but this opens up all the accordions.
Javascript:
$scope.Activate = function(val,filter) {
if (!$scope.open) {
$scope.open = true;
}
}
are you looking for something like this?
HTML Code
<div class="modal-body" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
<accordion close-others=false>
<accordion-group is-open="open" data-ng-repeat="(spec,value) in audit | groupBy:'specification'">
<accordion-heading class="col-lg-12">
<i class="glyphicon" ng-class="{'glyphicon-chevron-down': open[$index], 'glyphicon-chevron-right': !open[$index]}"></i>
<b ng-click="Activate($index)">{{spec}}</b>
<div class="btn-toolbar pull-right" ng-click="$event.stopPropagation();$event.preventDefault();">
<div class="btn-group pull-right">
<button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Username
</button>
</div>
<div class="btn-group pull-right">
<button data-style="slide-right" ng-click="Activate($index)" type="button" class="btn btn-xs">
<i title="Filter" class="fa fa-filter" style="color:#006b24"></i>
Lastname
</button>
</div>
</div>
</accordion-heading>
<div ng-show="open[$index]" ng-hide="!open[$index]">
<span class="col-lg-12" data-ng-repeat="val in value">{{val.username}} -- {{val.lastname}}</span>
</div>
</accordion-group>
</accordion>
</div>
JavaScript
$scope.open = [];
$scope.Activate = function (ind) {
if (!$scope.open[ind]) {
$scope.open[ind] = true;
}
else
{
$scope.open[ind] = false;
}
}
Here is my code:-
<div class="input-group">
<input class="form-control" ng-model="name" required />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" >
<i class="fa fa-plus"></i>
</button>
</span>
</div>
Here I am using bootstrap class input-group which contains two elements i.e <input> and <span>
So here I want to show that button on mouse hover.
So I tried by using ng-mouseover
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-mouseover="open" >
<i class="fa fa-plus"></i>
</button>
</span>
Where open is :-
$scope.open = true;
I think ng-mouseover is better option but if is there any other simple way.... please tell me
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.open = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-mouseover="open = true" ng-mouseleave="open = false">
To display button mouseover here!!!
<button class="btn btn-primary" type="button" ng-show="open">
<i class="fa fa-plus">Button</i>
</button>
</div>
</div>
try this. also you can use :hover for show/hide element.
<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
<i class="fa fa-plus"></i>
</button>
I have a Angular Strap popover that contains form elements:
<button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind">
<span class='glyphicon glyphicon-plus'></span>
</button>
I load that into the first popover
<button type="button" "class="btn btn-default" bs-popover data-auto-close="1" data-html="true" data-content="{{popoverContent}}" data-animation="am-flip-x" title="1st popover">
Button label
</button>
using:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", "$compile", function ($scope, imageHierarchyRepository, $templateCache, $compile) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
$scope.popoverContent = $templateCache.get("popoverTemplate.html");
};
}]);
})();
However the second popover doesn't show up, and I'm guessing that it has something to do with compiling the raw html string into the first popover. How do I correctly compile the contents of a popover in AngularJS?
I'm not sure if this will answer your question, but here's an example of how to show a popover within a popover using templates:
<button type="button" class="btn btn-primary" bs-popover data-title="primary popover" html="true" data-template-url="popoverTemplate.html">Primary popover</button>
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<button type="button" class="btn btn-default" bs-popover data-title="inner popover" html="true" data-template-url="popover2Template.html">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</script>
<script type="text/ng-template" id="popover2Template.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<form class="popover-content">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control"/>
</div>
</form>
</div>
</script>
I am trying to implement Bootstrap Modal from http://angular-ui.github.io/bootstrap/ (pls. search for Modal). The templateUrl refers to myModalContent.html. But, I could not find this file. Can someone shed some light on this file?
Thanks in advance!
It is a template written in a script tag
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
I cannot get tabs to work on the inside of my modal no matter what I do. If it matters the modal is within a ng-repeat with angularJS and the modal id is being called dynamically
<!--======== Trigger ========-->
<a data-toggle="modal" href='#{{faIcon.iconSelect}}'>Trigger Modal</a>
<!--======== modal ========-->
<div class="modal fade" id="{{faIcon.iconSelect}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-fw">{{faIcon.theIcon}}</i>{{faIcon.name}}</h4>
</div>
<div class="modal-body">
<h1><i class="fa fa-fw">{{faIcon.theIcon}}</i></h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="1">1</div>
<div class="tab-pane" id="2">2</div>
<div class="tab-pane" id="3">3</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">opied: {{copied}}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--======== modal ========-->
Am i missing an init code or something
according to my tests it seems that you don't have any problems with the code so the problem is probably on another line of your code.
The easiest but most common things that make this kind of thing happen is that you probably forgat to close some tag..