Jon Hartmann

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

jsFiddle Example: More Dynamic Form Templates

• July 29, 2014 3:40 PM
• Templating, AngularJS, Examples & Tutorials, Javascript
• Comments (0)

So this is the update to the earlier example, ditching the directive in favor of just simple Angular templating with ngOption and ngRepeat. The point here is to change both the UI and the object being acted upon in a very simple way: Use one dynamic data-set to control another dynamic data-set.

Previous Example:

• More Dynamic Form Templates

• Print
• Send

jsFiddle Example: AngularJS Directives for Dynamic Form Configuration

• July 29, 2014 1:40 PM
• AngularJS, Examples & Tutorials, Javascript
• Comments (0)

Here I show how you can use a directive to generate form elements by using dynamic scope references. Its not amazing and probably not even the best way to do this, but it works.

This is a middle stage of an example I'll post later of switching the UI completely to set options on different objects.

• Print
• Send

jsFiddle Example: Accessing Higher Contexts in Mustache Templates

• July 28, 2014 8:53 AM
• Templating, Examples & Tutorials, Javascript
• Comments (0)

A neat bit of Mustache implementation that I'd not really used before but needed: Mustache allows you to access higher contexts by reference, as long as there is not a conflict. A very clean solution unless you have values with a conflicting names, in which case the current context takes precedence.

• Print
• Send

jsFiddle Example: Using Self-Executing Functions with AngularJS Constants

• July 23, 2014 2:31 PM
• AngularJS, Examples & Tutorials, Javascript
• Comments (0)

Properly using Values and Constants in AngularJS can be really powerful, but AngularJS does have one annoyance with Values and Constants: if you want to keep values bundled together (for readability), its hard to have them also reference each other. Self-executing code to the rescue: just build up the value and return it from the function automatically.

• Print
• Send

jsFiddle Example: Proper Timeout Handling with AngularJS

• July 23, 2014 11:00 AM
• AngularJS, Examples & Tutorials, Javascript
• Comments (3)

AngularJS has a really poor handling of timeouts, at least for complex HTTP calls. You can provide a timeout in milliseconds, but if the request does time out, you just get a cancelled request. Now this might be fine for simple situations, but when you have CORS Ajax calls, you end up not being able to tell a timeout from a CORS request failure (at least not easily). This can be handled by switching to setting the timeout with a Promise instead. This code shows how to use a promise for your timeout in AngularJS to get clear error messages.

• Print
• Send