Advanced User Interface Controls and Components
Created: 30 November 2015
In general, you can add groups to Accordion directive for AngularJS, by adding accordion group elements in HTML. This works very well when you know from beginning the page format. However, in some cases, you may need create and add new groups to accordion dynamically on run-time.
The following sections of this article will show you how to create and add groups to accordion directive from code, using several different methods and events.
By clicking on buttons from control panel in our demo above, you can add or remove new groups in Accordion for AngularJS. There are several different buttons performing different operation explained below.
Similar: Accordion Component for Angular 2
At first, we need to set an array object that will hold all accordion groups. This object is defined in application scope so that it can be used by accordion directive, using the groups attribute that links the specified object with the one used by the accordion directive. Because of two-way data binding, any change in application scope is reflects back to the accordion directive, and vice versa
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUIAccordionService", "$timeout", function($scope, $ctrlService, $timeout){
// A unique identifer for the Accordion
$scope.ctrlName = "ctrlSample";
// An object that holds all accordion groups
$scope.groups = [
{ id: 1, name: 'Group1', text: 'Header 1' },
{ id: 2, name: 'Group2', text: 'Header 2' },
{ id: 3, name: 'Group3', text: 'Header 3' }
];
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.css" />
<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />
<script type="text/javascript" src="external/angular.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.accordion.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<iui-accordion name="{{ctrlName}}" class="directive" groups="groups" events="ctrlEvents">
<iui-accordion-group ng-repeat="group in groups" name="{{group.name}}" heading="{{group.text}}">
<div class="group-content">
{{group.name}} Content
</div>
</iui-accordion-group>
</iui-accordion>
</div>
</body>
</html>
Note The ctrlName attribute is used to identify the accordion to which the new group will be added. This is required for using the methods of IntegralUIAccordionService, and useful to distinguish a specific accordion when you have multiple ones present on the same page.
We can add new groups to the accordion, by simply using the default push method for a javascript array. The same can be done also by using the addGroup method of Accordion directive.
var groupCount = $scope.groups.length;
// Create a new accordion group
var createNewGroup = function(){
groupCount++;
return { id: groupCount, name: "Group" + groupCount, text: "Header " + groupCount };
}
// Add a new group to the accordion
$ctrlService.addGroup($scope.ctrlName, createNewGroup());
The above method is useful mainly when you want to add a new group at the end of the accordion. In cases where you need to place a group at specific position, above or below other group, a different method is required. The following methods are available:
For example, to add a group at third position in list of multiple groups present in accordion, we will use the following code:
// Insert a new group to the accordion at specified position
$ctrlService.insertGroupAt($scope.ctrlName, createNewGroup(), 2);
Whenever a new group is added using any of above methods, the groupAdding and groupAdded events are fired. You can use these events to set specific conditions during these operations, or add new operation suitable for your application.
Similar to above operations, you can also remove a group from the accordion dynamically from code. You can remove only one group or delete all groups from the accordion. For this purpose, the following methods are available:
In following example, the selected group is removed from the accordion:
// Get the currently selected group in accordion
var getCurrentSelection = function(){
return $ctrlService.selectedGroup($scope.ctrlName);
}
// Remove the currently selected group from the accordion
$ctrlService.removeGroup($scope.ctrlName, getCurrentSelection());
Like for add operations, whenever a group is removed from the accordion, the groupRemoving and groupRemoved events are fired. You can handle these events in your code to add custom functionality.
When all groups are removed using the clearGroups method, the clear event is fired.
Groups in IntegralUI Accordion directive for AngularJS can be created using only HTML or dynamically from code using built-in methods. During these operations, a set of specific events are fired, which when handled can further enhance the functionality of the accordion.