Jon Hartmann

jsFiddle : Angularized Gauge Display

• December 10, 2014 3:51 PM
• User Interface Design, AngularJS, Examples & Tutorials, Javascript
• Comments (0)

I kicked up my last example by converting the gauge into an Angular directive.

• Print
• Send

jsFiddle : Circular Gauge with Raphael

• November 25, 2014 3:20 PM
• User Interface Design, Examples & Tutorials, Javascript
• Comments (0)

A single 0-to-100 percent circular gauge done with Raphael. It is largely based off of a StackOverflow posting, but I added the text display and color animations as tests. It should be easy to bake this into an AngularJS directive for reuse.

• Print
• Send

jsFiddle: ngList and ngPluralize AngularJS Example

• August 14, 2014 11:11 AM
• Templating, AngularJS, Examples & Tutorials, Javascript
• Comments (0)

These two directives individually are pretty awesome, but they also go together really well, at least for demonstrating features. ngList converts string lists into arrays, while ngPluralize converts arrays into different strings based on the item count in the list. Both are important to know.

• Print
• Send

jsFiddle Example: Mustache Directive for AngularJS

• August 7, 2014 9:13 AM
• Templating, AngularJS, Examples & Tutorials, Javascript
• Comments (0)

In the blog post Considering Speed and Slowness in AngularJS, the idea is put forward to use MustacheJS, wrapped in an AngularJS Directive to render dynamic content, but come away with no or minimal bindings. I liked the idea, but I found the application too specific; while I get the philosophy of making Directives specific usage, I also hate redundant tools and making a separate directive for each and every place I want to use a Mustache template seems terrible too.

The key detail to note in this example is that the first element wrapped by my directive is a div with a ng-non-bindable on it. That is necessary to keep AngularJS from trying to parse and bind your Mustache template code.

• Print
• Send

jsFiddle Example: Final Dynamic Form Example

• July 30, 2014 10:05 AM
• Templating, AngularJS, Examples & Tutorials, Javascript
• Comments (0)

Ok, so this is the final variation on this that I'm going to post, even though I know that there are more efficient ways to handle element creation in AngularJS than using the ngIf block I'm using here. I've update the previous examples so that we now have two types of rendering for form questions, and the values are still tied to the underlying options values.

Previous Examples:

• More Dynamic Form Templates
• AngularJS Directives for Dynamic Form Configuration

• Print
• Send