Angular JSFiddle Examples.md

List of fiddles / gists / plunkers

Useful fiddles and gists collected from AngularJS forum discussions. Please edit and add!

Information about version changes can be found in the Changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md

Version 1.2.x

• Dirty animations with animate.css (https://github.com/nazmul-hoque/angular-animate)

Version 1.1.5

• Simple tabs for angular framework. Repo, live demo
• Dirty animations with animate.css extend demo
• Animations with angular (source):
  1. Demo #1 ngClass + CSS3 Transition
  2. Demo #2 ngClass for Something More Complex
  3. Demo #3 ngAnimate + CSS3 Transition
  4. Demo #4 ngAnimate + CSS3 Keyframe Animation
  5. Demo #5 ngAnimate + Animate.css
  6. Demo #6 ngAnimate + jQuery
• File upload with queue and drag-n-drop (html5 + iframe). Live demo, repo

Version 1.1.0

• Dynamic form fields (buele) http://jsfiddle.net/buele/nYzjY/
• Some text filters (Alan Löffler) http://jsfiddle.net/VX5LE/4/
• Some samples for combination of Search and pagination http://jsfiddle.net/SAWsA/11/
• angular-paste: Pasting tabular data to update scope variables. You can paste data from Excel directly onto the page. Uses jQuery so also shows how to change scope stuff on jQuery events: http://jsfiddle.net/psu9c/6/
• Example showing a service invoking an initialisation method only once on startup (Pawel Kozlowski): http://jsfiddle.net/pkozlowski_opensource/H2ps5/
• ng-grid - editable, templatable, full-featured grid http://angular-ui.github.io/ui-grid/
• Example angular directive to format a numeric input with decimal marks (commas and points), handly to use with currency inputs (Erick Mendoza) : http://jsfiddle.net/odiseo/dj6mX/
• Formatting date using MomentJS (http://momentjs.com/). Useful to show date returned via JSON in different format (such as ASP.NET JSON date format - "/Date(1352055184000)/") : http://jsfiddle.net/sumrak/6gYAz/2/
• Example directive implementation that fits text in the width of an overflow:hidden block: http://jsfiddle.net/mortimerpa/AKXez/
• Transclude examples (Omkar Patil)
  • Basic transclude - http://jsfiddle.net/ospatil/A969Z/
  • Using transclude argument of the compile function of a directive - http://jsfiddle.net/ospatil/A969Z/3/
  • Using $transclude injection into a Controller - http://jsfiddle.net/ospatil/A969Z/4/
• AngularJS based TreeView. No jQuery. (Jaeha, Ahn) - GitHub, jsFiddle
• Adding custom functionality to built-in form directive (Omkar Patil) - http://jsfiddle.net/ospatil/25Rcf/
• (Yet another) tree directive, featuring nested scope inheritance - http://jsfiddle.net/furf/EJGHX/19/
  • With nestedSortable jQuery plugin: http://jsfiddle.net/michieljoris/VmtfR/
• Speech bubble example using transclude (AngluarJS-DC meetup) - http://jsfiddle.net/angularjsdc/gCPDs/
• Glossary of Terms (AngularJS-DC meetup) showing a compile function - http://jsfiddle.net/angularjsdc/KRVSQ/
• Parse URL - http://jsfiddle.net/PT5BG/4/
• Media RSS reader, retains scroll position between views - http://jsfiddle.net/BkXyQ/6/
• Dropdown select and menu directives - http://jsfiddle.net/jseppi/cTzun/1/

Version 1.0.3

• Example of using JSFiddle's /echo/ service for testing Ajax calls (Christopher Hiller): http://jsfiddle.net/boneskull/eDb2S/
• Example of a service using YQL (Yahoo Query Language) with $http.jsonp (Louis De Bevere): http://jsfiddle.net/asgoth/7bNAd
• A simple selectable object list implemented as a directive (Taurus Colvin): http://jsfiddle.net/colvint/uAwJG/
• A simple CRUD admin with single & multiple update / delete, select all/none, and filtering (Taurus Colvin): http://jsfiddle.net/colvint/tyx3m/
• override $exceptionHandler and using it in a view http://plnkr.co/edit/0hpTkXx5WkvKN3Wn5EmY?p=preview

Version 1.0.2

• Updated angular-node-socket.io hack
• Example 'flash' service (Andy Joslin): http://plnkr.co/edit/3n8m1X?p=preview
• Add (AngularUI) & Removal (hackish) Animations (Dean | ProLoser): http://jsfiddle.net/ProLoser/tDDZs/
• Cascading Select Boxes (Dean|ProLoser): http://jsfiddle.net/ProLoser/N3GdT/7/
• Form Validation with Tooltips using Validation CSS Classnames (Adam Bradley): http://jsfiddle.net/adamdbradley/Qdk5M/
• Angular Bootstrap Tabbable with ng-view and url as current tab deep linking (Andy Joslin): http://plnkr.co/edit/PjuAWn?p=preview
• Angular Bootstrap NavBarTop directive with ng-transclude (Brian Ford): http://embed.plnkr.co/UZJ3IG
• Angular integration with Really Simple Color Picker (jQuery) (Brandon Tilley): http://jsfiddle.net/BinaryMuse/AnMhx/
• Example form wizard showing multi-step process using Bootstrap tabs and ng-switch (Ben Grimes): http://jsfiddle.net/bgrimes/58wqH/

Version 1.0.1

• Table Sorting (Pawel Kozlowski): http://jsfiddle.net/pkozlowski_opensource/CZRL5/12/ , google groups thread: https://groups.google.com/d/msg/angular/JApupquvXO0/RI415zxWirIJ
• Github project information directive (Jian Liao) : http://jsfiddle.net/jianliao/krYmq/
• Github events api hack (Brad Phelan) : http://jsfiddle.net/aczBz
• Game of life, coffeescript version (Brad Phelan): http://jsfiddle.net/CMM5w/4/
• AngularJS AutoComplete (Without JQuery UI, Up-Down Keys still working on) : http://jsfiddle.net/ZguhP/195/
• Edit in place example : http://jsfiddle.net/pkozlowski_opensource/yGGL2/3/
• Comments with reply 'depth' example (Andy Joslin): http://plnkr.co/edit/YsBIVj
• Form validation inside ng-repeat using ng-form (Pawel Kozlowski): http://jsfiddle.net/pkozlowski_opensource/rqARD/1/
• Bootstrap modal popup directives with Angular (alert, confirm, and load) (Tad Christiansen): http://jsfiddle.net/tadchristiansen/gt92r/
• Recursive tree directive http://plnkr.co/edit/T0BgQR (Andy Joslin)
• Extremely simple service shared between two controllers http://jsfiddle.net/whnSs/ (Andy Joslin)
• Factory vs Service http://jsfiddle.net/jamey777/tJSPt/ (James Wright)
  (uses 1.0.0rc9 but works with 1.0.1)
• Push transition/animation between partials: custom ng-view http://plnkr.co/edit/wwtQID?p=preview (Andy Joslin)
• Counting filtered items in ngRepeat http://jsfiddle.net/pkozlowski_opensource/Nk8qy/2/ (Pawel Kozlowski)
• Differences in $http and $resource usage http://jsfiddle.net/jhsousa/aQ4XX/ (Jorge Sousa)

Version 1.0.0

• Tinymce directives (Matthias Andrasch): http://jsfiddle.net/programmieraffe/kjsEV/
• Angular compiler's traverse order (depth first search) (Vojta Jína): http://jsfiddle.net/vojtajina/8yzbZ/
• use MongoLab in Angular (Pawel Kozlowski): http://jsfiddle.net/pkozlowski_opensource/3EPjK/2/
• EventDispatcher (publish/subscribe and server-push) (ThomasBurleson): http://jsfiddle.net/ThomasBurleson/sv7D5/
• Extremely simple pagination of data (Andy Joslin): http://jsfiddle.net/xncuF/

Version 1.0.0-rc12

• override $exceptionHandler (Pawel Kozlowski): http://jsfiddle.net/vbXqe/4/
• sticky notes with drag&drop (Lukas Ruebbelke): http://jsfiddle.net/simpulton/VJ94U/

Version 1.0.0-rc10

• date selector with separated year/month/day (Peter Smith): http://jsfiddle.net/pjstarifa/Avnxc/9/
• coffee script example (Andras): http://jsfiddle.net/gvJdn/1/
• JQueryMobile AngularJS Adapter 1.0.7rc2 (Tobias Bosch): http://jsfiddle.net/tigbro/Du2DY/
• Simple animate directive that uses jQuery http://jsfiddle.net/willkriski/E7xER/83/

Version 1.0.0-rc9

• Infinite scrolling (Vojta Jina): http://jsfiddle.net/vojtajina/U7Bz9/
• File upload with Drag&Drop. Not working with IE. (D. Zen): http://jsfiddle.net/danielzen/utp7j/

Version 1.0.0-rc8

• parent / sub component example where sub components using a common controller function; or "reference by id" example (John Lindquist): http://jsfiddle.net/johnlindquist/YYD8a/
• recursive ng-include demo (Brendan Owen): http://jsfiddle.net/brendanowen/uXbn6/8/
• fade in/fade out with directive (Zach Ashman): http://jsfiddle.net/xzachtli/K4Kx8/1/

Version 1.0.0-rc7

• Check box alternative using ng-show/ng-hide(Peter Smith): http://jsfiddle.net/pjstarifa/6zNu4/6/
• Jasmine unit tests (John Lindquist): http://jsfiddle.net/johnlindquist/d63Y3/
• Modal dialog directive with Angular and jQuery (Andy Joslin): http://jsfiddle.net/uBPyE/
• tabbed pane component (John Lindquist): http://jsfiddle.net/johnlindquist/QPbCS/
• dynamically change between horizontal and vertical layout: http://jsfiddle.net/cfulnecky/NRUxs/
• PubNub chat (Nolan Dubeau): http://jsfiddle.net/bv5Kq/13/

Version 1.0.0-rc6

• Markdown editor demo (Igor): http://jsfiddle.net/IgorMinar/CHVbb/442/

Version 1.0.0-rc5

• Display "Loading" title for XHR requests (zdam): http://jsfiddle.net/zdam/dBR2r/ , google groups trhead: https://groups.google.com/d/msg/angular/-/R11P6dLFFowJ
• Slightly modified version zdam's Loading fiddle, which displays a loading title instead of alerts (Andras): http://jsfiddle.net/dBR2r/8/
• Paging/Pagination http://jsfiddle.net/8WUrR/

Version 1.0.0-rc4

• jQuery UI Layout component directive with state attribute (B Letocha, I Minar) - http://jsfiddle.net/IgorMinar/jfn5z/3/
• Twitter Bootstrap popover directive (Johan) - http://jsfiddle.net/UYjkK/28/
• Dynamically adding and initializing a controller (ItsLeeOven) - http://jsfiddle.net/ItsLeeOwen/LHxKB/
• jQuery UI Autocomplete directive (Carles, Vojta Jina) - http://jsfiddle.net/vojtajina/JSkjP/12/

Version 1.0.0-rc3

• jQuery UI Accordion directive (Carles) - http://jsfiddle.net/carpasse/RST62/

Version 1.0.0-rc2

• Directive inside repeater(Boris Letocha) - http://jsfiddle.net/Bobris/A82EV/14/
• jQuery UI Layout component directive (Boris Letocha, Vojta Jina) - http://jsfiddle.net/wu3j3/5/
• recursive directive (Igor Minar) - http://jsfiddle.net/IgorMinar/CHVbb/423/ , google groups thread: https://groups.google.com/d/msg/angular/-/trhDNd13w9gJ
• Jasmine Test in JSFiddle: http://jsfiddle.net/p4mBY/28/

Version 1.0.0-rc1

• Game of Life demo (Thierry) - http://jsfiddle.net/tchatel/H2y5r/
• Last Tweets demo (Thierry): http://jsfiddle.net/tchatel/4FNeB/
• jQueryUI drag-n-drop (Daniel Zen) http://jsfiddle.net/IgorMinar/NyJcd/11/
• jQuery DataTables plugin (zdam) http://jsfiddle.net/zdam/pb9ba/ , http://jsfiddle.net/zdam/7kLFU/
• Uniqueness validation form: http://jsfiddle.net/mhevery/xX9aS/4/
• Jasmine Test in JSFiddle , D.Zen, http://jsfiddle.net/FgZ5B/
• paging DataTable, pure angular (Dalci de Jesus Bagolin): http://jsfiddle.net/dalcib/J3fjc/

Version 0.10.7

• Service-based lightweight jquery-ui wrapper (0.10.7, Adam) - http://jsfiddle.net/zdam/vGjXH/
• Repeater with inline templates and custom scope (0.10.7, Eric Jain, I Minar) - http://jsfiddle.net/KAFCK/3/
• Nested includes with inline templates (0.10.7, Stephanne Bisson) - http://stephanebisson.github.com/layout/#/view2 LiveDemo: http://stephanebisson.github.com/layout/ Updated for 1.0rc7 http://jsfiddle.net/cfulnecky/NRUxs/
• Inline template inside repeater (0.10.7, Vojta Jina) - http://jsfiddle.net/vojtajina/2Gqwg/
• Notify service (press 3 times!) (0.10.7, Vojta Jina) - http://jsfiddle.net/vojtajina/UCWMr/3/
• Twitter bootstrap modal dialog widget (0.10.7, Igor Minar) - http://jsfiddle.net/IgorMinar/mVSPC/
• Forms - Some basic inputs (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/SbZ9K/
• Forms - Password validation (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/CLyTc
• Forms - Selects (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/5wa2M
• Forms - Radio inputs (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/ezzHD
• Forms - Custom radio group (0.10.7, Vojta Jina) - http://jsfiddle.net/cambiata/gp7vM

Version 0.10.6

• Google map widget (0.10.6, Matthias Andrasch & Vojta Jina) - http://jsfiddle.net/vojtajina/3bpJk/25/
• Scope in ng:repeater (0.10.6, D. Zen, Robert Damphousse) - http://jsfiddle.net/robertjd/bNT56/25/
• Editor with static and dynamic fields (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/3juSX/
• Chained dropdown selections (0.10.6, Vojta Jina) - http://jsfiddle.net/KkdfV/35/
• Sortable table widget (0.10.6, Söderlind) - http://jsfiddle.net/dandoyon/4UCrW/5/ 1.0rc1 http://jsfiddle.net/dalcib/J3fjc/
• Sortable table widget a.k.a. data grid (Dalci Bagolin) - http://jsfiddle.net/dalcib/2w6Su/
• Watch array parameter (deep watch) (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/eQGXA/3/
• Widget inside repeat ($eval) (0.10.6, Ali Mills) - http://jsfiddle.net/alimills/FXgsL/1/
• Shopping Cart example (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/CSsrJ/4/
• Using mock service with JSFiddle (0.10.6, angular-mocks-0.10.6.js, Vojta Jina) - http://jsfiddle.net/vojtajina/DQHdk/ - See http://docs-next.angularjs.org/api/angular.module.ngMockE2E.$httpBackend
• using tooltipsy (0.10.6, Vojta Jina) - http://jsfiddle.net/vojtajina/z7a58/15/ (thread: https://groups.google.com/d/msg/angular/-/fSRw1fBO9QUJ)

Version 0.10.5

• Sortable list drag-n-drop (Igor minar) - http://jsfiddle.net/xnnjQ/6/
• Inline template using $cache (Vojta Jina) - http://jsfiddle.net/vojtajina/ENf5r/
• Repeater default values (Igor Minar) - http://jsfiddle.net/IgorMinar/Mv8zL/4/
• Filter items (Vojta Jina) - http://jsfiddle.net/vojtajina/EGKQU/
• Form builder (Dean Sofer | ProLoser) - http://jsfiddle.net/ProLoser/bp3Qu/light/

Version 0.10.4

• Sortable table (0.10.4, Dan Doyon) - http://jsfiddle.net/dandoyon/js64b/
• ng:repeat with key and value (0.10.4, Mårten Dolk & Vojta Jina) - http://jsfiddle.net/vojtajina/EHdQ7/4/
• Repeater and $parent scope (0.10.4, Misko Heverey) - http://jsfiddle.net/ezhrw/2/
• After render callback (0.10.4, Elliot Sprehn) - http://jsfiddle.net/8YmbC/1/

Version 0.9.19 and older

• Angular widgets (0.9.17, jquery-ui-1.8.14, Łukasz Twarogowski) - http://twarogowski.github.com/angular-contrib/docs/widgets.html
  • autocomplete
  • datepicker
  • emblem
  • map
  • progress
  • enter
  • button
  • toggle
  • seclectable
  • masked
• TODO example from angularjs.org (0.9.18) - http://jsfiddle.net/IgorMinar/M8YnR/
• Invoice example from angularjs.org (0.9.16) - http://jsfiddle.net/vojtajina/pfqKY/
• Nested repeaters (0.9.18) - http://jsfiddle.net/vojtajina/u75us/
• jQuery Cycle plugin wrapper (0.9.18) - http://jsfiddle.net/vojtajina/creEk/
• jQuery Carousel plugin wrapper (0.9.17) - http://jsfiddle.net/vojtajina/3Gx42/
• jQuery Raty plugin wrapper (0.9.17) - http://jsfiddle.net/vojtajina/yy9VA/
• Injecting custom service into another custom service (0.9.19) - http://jsfiddle.net/vojtajina/4xu5g/
• How to set page title from included partial (0.9.?) - https://gist.github.com/1022724
• Accessing a scope from outside (0.9.16) - http://jsfiddle.net/vojtajina/ngZ6u/
• Trivial tabs (0.9.19) - http://jsfiddle.net/vojtajina/vM4FY/
• AngularJS + Jasmine (0.9.19) http://jsfiddle.net/vojtajina/TCHXy/
• Password example from angularjs.org (0.9.19) - http://jsfiddle.net/vojtajina/76E4S/
• Inter-controller service communication (0.9.19, Cambiata) - http://jsfiddle.net/cambiata/NXhTz/
• Repeater and $parent scope (0.9.19, Vojta Jina) - http://jsfiddle.net/vojtajina/5AMPm/
• Repeater and $parent scope, using controller prototype (0.9.19, Vojta Jina) - http://jsfiddle.net/vojtajina/5AMPm/1/
• Mouseenter directive (0.9.19, Misko Heverey) - http://jsfiddle.net/upPdx/1/
• Custom text excerpt filter (0.9.19, A Suller) - http://jsfiddle.net/xMYpy/