Today, AngularJS isn't doing what I expect. I've auto-generating a really long form in Django, and adding ng-model attributes so I can summarise the form. Unfortunately, Angular is overwriting my defaults. Here's a shortened example:

<html>
    <head>
    </head>
    <body>
        <form ng-app="testApp" ng-controller="TestCtrl">
            <select name="colour" ng-model="colour">
                <option value="red">Red</option>
                <option value="green" selected="selected">Green</option>
                <option value="blue">Blue</option>
            </select>
            <p>You favourite colour is <span style="color: {{ colour }}">{{ colour }}</span>.</p>
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script>
         angular.module('testApp', [])
                .controller('TestCtrl', function($scope) {
                    $scope.$watch('colour', function(newValue) {
                        console.log('Colour is: ' + newValue );
                    });
                });
        </script>
    </body>
</html>

It looks something like this:

After marvelling at how little code you need to do something useful, I note that although the HTML form has Green "selected", the select box is initially has no value selected. Why is that? The reason is that once Angular has loaded, it sets the <select> field to its own initial value of undefined, overwriting the HTML default value.

Enter: Angular Auto Value

Thankfully, John Wright and Glauco Custódio have both come up with libraries to make Angular do what we expect. These are Angular Auto Value and Angular Initial Value respectively. Here's our code after modification to use Angular Auto Value (extra <script> element and 'auto-value' argument to angular.module):

<html>
    <head>
    </head>
    <body>
        <form ng-app="testApp" ng-controller="TestCtrl">
            <select name="colour" ng-model="colour">
                <option value="red">Red</option>
                <option value="green" selected="selected">Green</option>
                <option value="blue">Blue</option>
            </select>
            <p>You favourite colour is <span style="color: {{ colour }}">{{ colour }}</span>.</p>
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <!-- Extra script -->
        <script src="https://cdn.jsdelivr.net/angular.auto-value/latest/angular-auto-value.min.js"></script>
        <script>
         angular.module('testApp', ['auto-value']) // Extra 'auto-value' dependency
                .controller('TestCtrl', function($scope) {
                    $scope.$watch('colour', function(newValue) {
                        console.log('Colour is: ' + newValue );
                    });
                });
        </script>
    </body>
</html>

I often reach for a pinch of Angular as a "jQuery substitute". A touch of auto-completion or form validation adds a lot of value to a server-side web app. Like jQuery, there's no assumption that your whole system is written in JavaScript. Unlike jQuery, it remains maintainable as you add more and more features.

Stumbles is Ben Sturmfels

Other articles

Bruising first experience with ClojureScript

Nginx dynamic image resizing with caching

Lots of love for Conservancy at LCA 2016

Other articles

blogroll

social