|
41 | 41 | ```javascript |
42 | 42 | angular.module('myApp',['uiAccordion']); |
43 | 43 | ``` |
44 | | - |
45 | | -* Simple Accordion with options |
46 | | - |
47 | | -#### HTML |
48 | | -```html |
49 | | -<ul ng-accordion options="simpleAccordionOptions"> |
50 | | - <li ng-accordion-group options="accordionGroupOptions1"> |
51 | | - <h3 ng-accordion-heading> Heading1</h3> |
52 | | - <div ng-accordion-body> Body1</div> |
53 | | - </li> |
54 | | - <li ng-accordion-group options="accordionGroupOptions2"> |
55 | | - <h3 ng-accordion-heading> Heading2</h3> |
56 | | - <div ng-accordion-body> Body2</div> |
57 | | - </li> |
58 | | - <li ng-accordion-group options="accordionGroupOptions3"> |
59 | | - <h3 ng-accordion-heading> Heading3</h3> |
60 | | - <div ng-accordion-body> Body3</div> |
61 | | - </li> |
62 | | -<ul> |
63 | | -``` |
64 | | - |
65 | | -##### CODE |
66 | | -```javascript |
67 | | -angular.module('myApp',['uiAccordion']); |
68 | | -angular.module('myApp').controller("myCtrl",function($scope){ |
69 | | - |
70 | | - $scope.simpleAccordionOptions={ |
71 | | - closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close. |
72 | | - } |
73 | | - $scope.accordionGroupOptions1={ |
74 | | - open:true // (Default: false) - Whether accordion group is open or closed. |
75 | | - } |
76 | | - $scope.accordionGroupOptions2={ |
77 | | - open:false, |
78 | | - disabled:true //(Default: false) - Whether the accordion group is disabled or not. |
79 | | - } |
80 | | - $scope.accordionGroupOptions3={ |
81 | | - open:true |
82 | | - } |
83 | | -}); |
84 | | -``` |
85 | | - |
86 | | -* Advance Accordion |
87 | | - |
88 | | -#### HTML |
89 | | -```html |
90 | | -<ul ng-accordion options="simpleAccordionOptions"> |
91 | | - <li ng-accordion-group options="accordionGroupOptions1"> |
92 | | - <h3 ng-accordion-heading> Heading1</h3> |
93 | | - <div ng-accordion-body> Body1</div> |
94 | | - </li> |
95 | | - <li ng-accordion-group options="accordionGroupOptions2"> |
96 | | - <h3 ng-accordion-heading> Heading2</h3> |
97 | | - <div ng-accordion-body> Body2</div> |
98 | | - </li> |
99 | | - <li ng-accordion-group options="accordionGroupOptions3"> |
100 | | - <h3 ng-accordion-heading> Heading3</h3> |
101 | | - <div ng-accordion-body> Body3</div> |
102 | | - </li> |
103 | | -<ul> |
104 | | -``` |
105 | | - |
106 | | -##### CODE |
107 | | -```javascript |
108 | | -angular.module('myApp',['uiAccordion']); |
109 | | -angular.module('myApp').controller("myCtrl",function($scope){ |
110 | | - |
111 | | - $scope.simpleAccordionOptions={ |
112 | | - closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close. |
113 | | - } |
114 | | - $scope.accordionGroupOptions1={ |
115 | | - open:true //(Default: false) - Whether accordion group is open or closed. |
116 | | - } |
117 | | - $scope.accordionGroupOptions2={ |
118 | | - open:false, |
119 | | - disabled:true //(Default: false) - Whether the accordion group is disabled or not. |
120 | | - } |
121 | | - $scope.accordionGroupOptions3={ |
122 | | - open:true, |
123 | | - beforeOpen:function(){ //promise which is resolved before showing accordion body |
124 | | - var def=$q.defer(); |
125 | | - // busy doing some stuff |
126 | | - def.resolve(); |
127 | | - return def.promise; |
128 | | - }, |
129 | | - beforeHide:function(){ //promise which is resolved before hidding accordion body |
130 | | - var def=$q.defer(); |
131 | | - // busy doing some stuff |
132 | | - def.resolve() |
133 | | - return def.promise; |
134 | | - } |
135 | | - } |
136 | | -}); |
137 | | -``` |
138 | | - |
139 | | -* Nested Accordions |
140 | | - |
141 | | -#### HTML |
142 | | -```html |
143 | | -<ul ng-accordion> |
144 | | - <li ng-accordion-group> |
145 | | - <h3 ng-accordion-heading> Heading1</h3> |
146 | | - <div ng-accordion-body> |
147 | | - <h6>Nested Accordion</h6> |
148 | | - <li ng-accordion-group> |
149 | | - <h3 ng-accordion-heading> Heading11</h3> |
150 | | - <div ng-accordion-body> Body11</div> |
151 | | - </li> |
152 | | - <li ng-accordion-group > |
153 | | - <h3 ng-accordion-heading> Heading12</h3> |
154 | | - <div ng-accordion-body> Body12</div> |
155 | | - </li> |
156 | | - <li ng-accordion-group > |
157 | | - <h3 ng-accordion-heading> Heading13</h3> |
158 | | - <div ng-accordion-body> Body13</div> |
159 | | - </li> |
160 | | - </div> |
161 | | - </li> |
162 | | - <li ng-accordion-group > |
163 | | - <h3 ng-accordion-heading> Heading2</h3> |
164 | | - <div ng-accordion-body> Body2</div> |
165 | | - </li> |
166 | | - <li ng-accordion-group > |
167 | | - <h3 ng-accordion-heading> Heading3</h3> |
168 | | - <div ng-accordion-body> Body3</div> |
169 | | - </li> |
170 | | -<ul> |
171 | | -``` |
172 | | - |
173 | | - |
| 44 | +### for more [Click me](http://kuldeepkeshwar.github.io/ui-accordion) |
0 commit comments