AngularJS: Form build usin switch

http://angularjs.org/

by gavinfoley

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-controller="EntityForm">
    <form class="form-horizontal">
        <div class="control-group" ng-repeat="element in form">
            <label class="control-label">{{element.label}}</label>
            <div class="controls" ng-switch="element.widget">
                <input ng-switch-when="text" type="text" ng-model="entity[element.model]" ng-required="element.required" />
                <select ng-switch-when="select" ng-model="entity[element.model]" ng-required="element.required" ng-options="o.key as o.name for o in element.options"></select>
            </div>
        </div>
        
        <button class="btn" ng-click="updateEntity()">updateEntity()</button>
    </form> <pre>{{ entity|json }}</pre>

</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('EntityForm', function ($scope) {

    // Data to be edited in the form
    // (would normally by fetched from the server)
    $scope.entity = {
        "status": 0,
            "kind": "venue",
            "name": "Specialty's Cafe",
            "language": "en",
            "phones": [{
            "type": "home",
                "value": "415 30 15 48"
        }, {
            "type": "mobile",
                "value": "415 71 05 48"
        }],
            "title_list": "Venue with multiple phones",
            "created": 1364530269,
            "modified": 1364530269,
            "address": null,
            "id": 5044031582654956000
    };

    // Object representing the form (will be generated by GAE).
    $scope.form = {
        name: {
            label: 'Name',
            model: 'name',
            widget: 'text',
            required: true
        },
        language: {
            label: 'Language',
            model: 'language',
            widget: 'select',
            required: true,
            options: [{
                key: 'en',
                name: 'English'
            }, {
                key: 'fr',
                name: 'French'
            }, {
                key: 'und',
                name: 'Undefined'
            }]
        }
    };

    $scope.updateEntity = function () {
        $scope.entity.name += " [updated]";
    };
});