Dynamically Change Form Controls

Example of dynamically generating form controls with AngularJS.

by Akram kamal

HTML

<div ng-app="DemoApp">
    <div ng-controller="ExampleController">
        Choose Object: <select ng-model="currentObject" ng-options="object.name for object in myObjects"></select>

        <hr />
        
        <p ng-hide="currentObject">
            Select an object to Edit.
        </p>
        
        <label ng-repeat="optionConfig in config[currentObject.type]">
            {{optionConfig.label}}:
            <span ng-if="optionConfig.type === 'text'">
                <input ng-model="currentObject.options[optionConfig.field]" type="text" />
            </span>
            <span ng-if="optionConfig.type === 'select'">
                <select
                    ng-model="currentObject.options[optionConfig.field]"
                    ng-options="option.value as option.label for option in optionConfig.values">
                </select>
            </span>
        </label>
        
        <hr />
          
        <pre>
My Objects: {{myObjects | json}}
        </pre>
    </div>
</div>

CSS

label {
    display: block;
}

JavaScript

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

myApp.value('typeConfig', {
    fruit : [
        {    label: 'Color',
             field: 'color',
             type: 'select',
             values: [
                 { value: 'yellow', label : 'Yellow' },
                 { value: 'green', label : 'Green' }
             ]
        },
        {    label: 'Description',
             field: 'description',
             type: 'text'
        }
    ],
    car : [
       {    label: 'Color',
             field: 'color',
             type: 'select',
             values: [
                 { value: 'red', label : 'Red' },
                 { value: 'blue', label : 'Blue' }
             ],
             default: 'red'
        },
        {    label: 'Interior',
             field: 'interiorColor',
             type: 'select',
             values: [
                 { value: 'grey', label : 'Grey Cloth' },
                 { value: 'leather', label : 'Leather' }
             ],
             default: 'red'
        },
        {    label: 'Model Number',
             field: 'model',
             type: 'text'
        }
    ]
});

myApp.value('objectData', [
    {    name: 'Example Car',
         type: 'car',
         options: {}
    },
    {    name: 'Example Fruit',
         type: 'fruit',
         options: {}
    }
]);

myApp.controller('ExampleController', function ($scope, typeConfig, objectData) {
    $scope.config = typeConfig;
    $scope.myObjects = objectData;
    $scope.currentObject = null;
});