<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>
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; });
label { display: block; }