Angular template for dealing with custom fields defined by a json object.

custom-inputs.html

<div ng-switch="input.displayType" ng-class="input.displayType">
    <div ng-switch-when="Input" class="text-input custom-input"
         ng-class="input.options.multiline ? 'multiline' : 'singleline'">
        <span class="category">{{input.name}}</span>
        <span class="info">
            <input ng-if="!input.options.multiline && input.dataType === 'NUMBER'"
                   type="{{input.dataType}}" name="{{input.code}}" ng-model="input.value"
                   required="input.required" min="0" ng-disabled="disabled">

            <input ng-if="!input.options.multiline && input.dataType === 'TEXT'"
                   type="{{input.dataType}}" name="{{input.code}}" ng-model="input.value"
                   required="input.required" ng-disabled="disabled">

            <textarea ng-if="input.options.multiline" name="{{input.code}}" ng-model="input.value"
                      required="input.required" ng-blur="saveValue()" ng-disabled="disabled"></textarea>
        </span>
    </div>

    <div ng-switch-when="Select" class="select-input custom-input">
        <span class="category">{{input.name}}</span>
        <span class="info">
        <select ng-model="input.value" name="{{ input.code }}"
                ng-options="option for option in input.options.dataProvider" ng-blur="saveValue()"
                required="input.required" ng-disabled="disabled">
        </select>
        </span>
    </div>

    <div ng-switch-when="DateTime" class="date-time-input custom-input">
        <span class="category">{{ input.name }}</span>
        <span class="info">
            <input ng-if="!input.options.showDateField && input.options.showTimeField"
                   type="time" name="{{input.code}}" ng-model="input.value" ng-disabled="disabled"/>

            <input ng-if="input.options.showDateField && !input.options.showTimeField"
                   type="date" name="{{input.code}}" ng-model="input.value" ng-disabled="disabled"/>

            <input ng-if="input.options.showDateField && input.options.showTimeField"
                   type="datetime-local" name="{{input.code}}" ng-model="input.value" ng-disabled="disabled"/>
        </span>
    </div>

    <div ng-switch-when="Checkbox" class="checkbox-input custom-input">
        <span class="category">{{input.name}}</span>
        <span class="info">
            <div class="checkbox-wrapper">

                <input type="checkbox" class="" name="{{input.code}}" id="{{input.code}}"
                       ng-model="input.value" required="input.required" ng-checked="input.value" ng-disabled="disabled">
                <label for="{{input.code}}">No</label>
            </div>
        </span>
    </div>
</div>

customFields.js

var customFields = angular.module('iOfficeCustomFields', []);

customFields.directive('customField', function() {
	return {
		restrict: 'EA',
		templateUrl: function(tElement, tAttrs) {
			if (tAttrs.templatUrl === undefined) {
				return '/directives/customFields/templates/custom-field.html'
			} else {
				return tAttrs.templateUrl;
			}
		},
		scope: {
			fieldData: '=',
			mode: '='
		},
		controller: function($scope, $element, $attrs) {
			$scope.input = $scope.fieldData;
			$scope.disabled = false;

			$scope.$watch('mode', function(newVal) {
				$scope.disabled = !newVal;
			});


		}
	}
});