LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Accordion / Add-Remove

{{group.name}} Content






In this sample you can create and/or modify a list of groups using several different methods:

  • addGroup - adds a new group
  • insertGroupAfter - adds a new group after specified group (in this example the selected group)
  • insertGroupAt - adds a new group at specified position
  • insertGroupBefore - adds a new group before specified group (in this example the selected group)
  • removeGroup - removes a group (in this sample the selected group)
  • removeGroupAt - removes a group at specified position from parent collection
  • clearGroups - removes all groups

<!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-style="background:{{ctrlBackground}};border:{{ctrlBorder}}">

<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>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUIAccordionService", "$timeout", function($scope, $ctrlService, $timeout){

$scope.ctrlName = "ctrlSample";

$scope.insertPos = 0;

$scope.removePos = 0;

$scope.disableButtons = false;

$scope.groups = [

{ id: 1, name: 'Group1', text: 'Header 1' },

{ id: 2, name: 'Group2', text: 'Header 2' },

{ id: 3, name: 'Group3', text: 'Header 3' }

];

 

var groupCount = $scope.groups.length;

 

var getCurrentSelection = function(){

return $ctrlService.selectedGroup($scope.ctrlName);

}

 

var createNewGroup = function(){

groupCount++;

return { id: groupCount, name: "Group" + groupCount, text: "Header " + groupCount };

}

 

$scope.add = function(){

$ctrlService.addGroup($scope.ctrlName, createNewGroup());

}

 

$scope.insertAfter = function(){

$ctrlService.insertGroupAfter($scope.ctrlName, createNewGroup(), getCurrentSelection());

}

 

$scope.insertAt = function(){

$ctrlService.insertGroupAt($scope.ctrlName, createNewGroup(), $scope.insertPos);

}

 

$scope.insertBefore = function(){

$ctrlService.insertGroupBefore($scope.ctrlName, createNewGroup(), getCurrentSelection());

}

 

$scope.remove = function(){

$ctrlService.removeGroup($scope.ctrlName, getCurrentSelection());

}

 

$scope.removeAt = function(){

$ctrlService.removeGroupAt($scope.ctrlName, $scope.removePos);

}

 

$scope.clear = function(){

$ctrlService.clearGroups($scope.ctrlName);

$scope.disableButtons = true;

groupCount = 0;

}

 

$scope.onClear = function(e){

updateAccordionAppearance();

}

 

$scope.onGroupAdded = function(e){

updateAccordionAppearance();

 

$ctrlService.selectedGroup($scope.ctrlName, e.obj);

}

 

$scope.onGroupRemoved = function(e){

updateAccordionAppearance();

}

 

var updateAccordionAppearance = function(){

var updateTimer = $timeout(function(){

if ($scope.groups.length == 0){

$scope.ctrlBackground = 'white';

$scope.ctrlBorder = 'thin solid gray';

}

else {

$scope.ctrlBackground = 'transparent';

$scope.ctrlBorder = 'thin solid transparent';

}

 

$scope.disableButtons = $scope.groups.length > 0 ? false : true;

 

$timeout.cancel(updateTimer);

}, 1);

}

 

$scope.ctrlEvents = {

clear: function(){

return $scope.onClear();

},

groupAdded: function(e){

return $scope.onGroupAdded(e);

},

groupRemoved: function(e){

return $scope.onGroupRemoved(e);

}

}

}]);

button

{

margin: 5px 0;

width: 125px;

}

.inline-block

{

display: inline-block;

margin: 3px 0;

}

.inline-button

{

width: 85px;

margin-right: 3px;

}

.group-content

{

padding: 25% 10px;

text-align: center;

}