var myApp = angular.module('DemoApp', []); myApp.value('typeConfig', { fruit : [ { label: 'Color', field: 'color', type: 'color-picker', values: [ { value: 'yellow', label : 'Yellow' }, { value: 'green', label : 'Green' } ], default: 'yellow' }, { label: 'Size', field: 'size', values: [ { value: 's', label : 'Small' }, { value: 'm', label : 'Medium' }, { value: 'l', label : 'Large' } ], default: 'm' } ], car : [ { label: 'Color', field: 'color', type: 'color-picker', values: [ { value: 'red', label : 'Red' }, { value: 'blue', label : 'Blue' } ], default: 'red' }, { label: 'Size', field: 'size', values: [ { value: 'compact', label : 'Compact' }, { value: 'large', label : 'Large' } ], default: 'compact' } ] }); myApp.value('objectData', [ { name: 'Test 1', type: 'car', options: {} }, { name: 'Test 2', type: 'fruit', options: {} }, { name: 'Test 3', type: 'car', options: {} } ]); myApp.controller('ExampleController', function ($scope, typeConfig, objectData) { $scope.config = typeConfig; $scope.myObjects = objectData; $scope.currentObject = null; });
<div ng-app="DemoApp"> <div ng-controller="ExampleController"> <pre> My Objects: {{myObjects | json}} </pre> Choose Object: <select ng-model="currentObject" ng-options="object.name for object in myObjects"></select> <div ng-repeat="optionConfig in config[currentObject.type]"> {{optionConfig.label}}: <select ng-model="currentObject.options[optionConfig.field]" ng-options="option.value as option.label for option in optionConfig.values" ></select> <br /> </div> </div> </div>