$show=home$hide=mobile-page

Angular JS Custom Directive for Expand Collapse

Tutorial on how to create an Angular JS Directive for expand and collapse with step by step instructions, demo and source code download.

Tutorial on how to create an Angular JS Directive for expand and collapse with step by step instructions, demo and source code download

STEP1: CREATE THE CONTROLLER


Create a JS file demoController.js



STEP 2: SET UP THE CONTROLLER TO SUPPLY DATA


Initialise a scope variable (e.g. $scope.customDataList) with the data.



STEP 3: CREATE THE DIRECTIVE


Create a JS file viewMoreDirective.js



viewMoreDirective.html has the template for the directive.
customdata: '=' binds the data object having the content. In the viewMoreDirective.html, the content is accessed through customdata. For instance, customdata.id

STEP 4: CREATE THE TEMPLATE


Create an html file viewMoreDirective.html



STEP 5: UPDATE THE DIRECTIVE TO HANDLE WINDOW RESIZE


The option to expand/ collapsed is displayed only if the content to be displayed exceeds the specified height of the content. Show/ hide of expand/ collapse option is handled in case of resizing the browser; in mobile devices the view is shown accordingly.



STEP 6: UPDATE THE DIRECTIVE TO HANDLE VIEW MORE/ VIEW LESS BUTTON CLICKS





STEP 7: INCLUDE THE DIRECTIVE MARK UP IN THE VIEW


To use the directive, include the directive mark-up in the html page
<view-more customdata="data"></view-more> This directive can also be used inside an ng-repeat.



  • [accordion]
    • Download
    • Demo

COMMENTS





Name

AngularJS,3,Automation Testing,8,CSharp,5,Disqus,1,Excel,2,HP ALM,5,HTML5,1,ISTQB,2,Java Script,2,Manual Testing,7,Photography,1,Quiz,2,REST API,5,Testing,15,UFT,8,VB,5,VBScript,1,Wordpress,1,
ltr
item
Aneejian: Angular JS Custom Directive for Expand Collapse
Angular JS Custom Directive for Expand Collapse
Tutorial on how to create an Angular JS Directive for expand and collapse with step by step instructions, demo and source code download.
https://2.bp.blogspot.com/-jVnRIKzO-sw/WMf2jm6xj5I/AAAAAAAAAE4/-nzQVFNAEdYk8rj7ksCs50dzYSsQeOBdgCLcB/s320/featured%255B1%255D.jpg
https://2.bp.blogspot.com/-jVnRIKzO-sw/WMf2jm6xj5I/AAAAAAAAAE4/-nzQVFNAEdYk8rj7ksCs50dzYSsQeOBdgCLcB/s72-c/featured%255B1%255D.jpg
Aneejian
http://www.aneejian.com/2015/08/angular-js-custom-directive-for-expand-or-collapse.html
http://www.aneejian.com/
http://www.aneejian.com/
http://www.aneejian.com/2015/08/angular-js-custom-directive-for-expand-or-collapse.html
true
5798203121010168414
UTF-8
Loaded All Posts No posts found VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU ARCHIVE SEARCH ALL POSTS No post found which matches with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy