This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
Resources: JSFiddle Examples
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
- Dirty animations with animate.css (https://github.com/nazmul-hoque/angular-animate)
- Simple tabs for angular framework. Repo, live demo
- Dirty animations with animate.css extend demo
- Animations with angular (source):
- File upload with queue and drag-n-drop (html5 + iframe). Live demo, repo
- 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:hiddenblock: 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/
- 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
- 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) (Michelle 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/
- 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)
- 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/
- override $exceptionHandler (Pawel Kozlowski): http://jsfiddle.net/vbXqe/4/
- sticky notes with drag&drop (Lukas Ruebbelke): http://jsfiddle.net/simpulton/VJ94U/
- 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/
- 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/
- 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/
- 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/
- Markdown editor demo (Igor): http://jsfiddle.net/IgorMinar/CHVbb/442/
- 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/
- 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/
- jQuery UI Accordion directive (Carles) - http://jsfiddle.net/carpasse/RST62/
- 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/
- 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/
- 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
- 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)
- 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/
- 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/
- 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/
