Add or Remove Groups in Accordion for AngularJS

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.

Accordion directive is part of IntegralUI Studio for Weba suite of UI Components for development of web apps

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.

Add a Group to AngularJS Accordion

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

<iui-accordion-groupng-repeat="group in groups"name="{{group.name}}"heading="{{group.text}}">

<divclass="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.

Insert a Group at Specific Position in AngularJS Accordion

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:

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.

Remove a Group from AngularJS Accordion

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:

Conclusion

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.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.