{{group.content}}
Accordion directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 25 April 2016
In most cases, the Accordion is created statically within the web page, with its content predetermined. That may not be good enough when you want to dynamically change the content for specific group or load accordion in whole from a remote data source. In following sections, we will show you how to load data from a JSON file and dynamically populate the IntegralUI Accordion directive for AngularJS.
{{group.content}}
As above demo shows, the content of accordion is fully loaded from a JSON file. Each group, their header and content, uses JSON data that is retrieved dynamically from a remote server. By changing the data source, you can also change the accordion content, on demand.
Similar: Accordion Component for Angular 2
At first, we need to specify the content of our groups, their header and content. In our example, we are using only text for accordion header and content. Therefore, our JSON will look like:
[
{
"id": "1",
"name": "group1",
"title": "Group 1",
"content": "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit."
},
{
"id": "2",
"name": "group2",
"title": "Group 2",
"content": "Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat."
},
{
"id": "3",
"name": "group3",
"title": "Group 3",
"content": "Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst."
}
]
Note Although in our example, only text is used for accordion content, you can set any HTML elements in JSON.
Now, we need to specify how our data from JSON file will be displayed. For group header we are only showing a single lined text, so we only need to specify the heading property for each group. In similar way for the group content, we will display a multiline text.
<iui-accordion name="{{ctrlName}}" class="directive" groups="groups">
<iui-accordion-group ng-repeat="group in groups" name="{{group.name}}" heading="{{group.title}}">
<p class="custom-group-content">{{group.content}}</p>
</iui-accordion-group>
</iui-accordion>
.directive
{
width: 300px;
height: 250px;
}
.custom-group-content
{
margin: 0;
padding: 5px;
}
In order to load data from a remote JSON file, we will use AngularJS $http service. As a start we need to have a array object in application controller, that will hold all group objects retrieved from JSON data. Then we need to link this array object with the Accordion directive using the groups property.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUIAccordionService", "$http", "$timeout", function($scope, $ctrlService, $http, $timeout){
$scope.ctrlName = "ctrlSample";
$scope.groups = [];
var initTimer = $timeout(function(){
var dataSource = $http.get('accordion-groups.json');
if (dataSource){
dataSource.success(function(data){
// Suspend the Layout
$ctrlService.suspendLayout($scope.ctrlName);
// Load Groups into the Accordion
$ctrlService.loadData($scope.ctrlName, data);
// Update the Layout
$ctrlService.resumeLayout($scope.ctrlName);
});
dataSource.error(function(data){
alert("AJAX failed to Load Data");
});
}
$timeout.cancel(initTimer);
}, 1);
}]);
So now when data is retrieved using the $http service, we only need to push each JSON object into the groups, and the accordion will automatically update its content.
Populating the Angular Accordion directive dynamically with data from a remote JSON file is simple. We only need to create the data structure for accordion groups, and then link this data with the groups property. When data is loaded, the accordion will update its groups automatically.