Angularjs Accordion Example - Jquery
How to get accordion effect using angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This simple jquery allows you to create animation effect using angularjs accordion. Here accordion are used to create expand and collapse effect in content. The sample jquery code using angular accordion is given below.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.model = [];
$scope.model.push({ title: 'Fruits', subitems: ['Apple','Orange','Mango','Lemon'] });
$scope.model.push({ title: 'Animals', subitems: ['Lion', 'Tiger', 'Dog', 'Elephant'] });
$scope.model.push({ title: 'Colors', subitems: ['Red', 'Black', 'White', 'Orange'] });
});
app.directive('accordion', function () {
return {
restrict: 'E',
scope: { model: '='},
templateUrl: 'demo.html',
link: function (scope, element, attr) {
scope.parentId = attr.id;
}
}
});
</script>
<body ng-app="app" ng-controller="ctrl" style='font-size:1.8em;'>
<script type="text/ng-template" id="demo.html">
<div id="{{parentId}}">
<div class="panel" ng-repeat="item in model">
<a href="#" data-toggle="collapse" data-parent="#{{parentId}}" data-target="#child{{$index}}" ng-click="model.selected = item">{{item.title}}
</a>
<div id="child{{$index}}" ng-class="{'collapse':true}">
<ul>
<li ng-repeat="subitem in item.subitems">{{subitem}}</li>
</ul>
</div>
</div>
</div>
</script>
<accordion model="model" id="test"></accordion>
</body>
