Angular

by Amanda Williamson

HTML

<div ng-app="myApp" ng-controller="Ctrl as ctrl">
    
    <!-- iterate over preferences -->
    <div class="values" ng-repeat="(key, value) in ctrl.userPreferences.theme">
        
        <span>{{ key }}:</span>
        <span>{{ value }}</span>
        
        <!-- use mapping along with ng-switch to find out what template to use -->
        <div ng-switch="ctrl.mapping[key]">
            
            <!-- boolean -->
            <div ng-switch-when="boolean">
                <select ng-options="bool for bool in [true, false]" ng-model="ctrl.userPreferences.theme[key]"></select>
            </div>
           
            <!-- dropdown -->
            <div ng-switch-when="dropdown">
            
                <!-- check for possible pref values if they exist -->
                <div ng-if="!!ctrl.preferenceValues[key]">
                    <select ng-options="prefVals for prefVals in ctrl.preferenceValues[key]" ng-model="ctrl.userPreferences.theme[key]"></select>
                </div>
                
                <div ng-if="!ctrl.preferenceValues[key]">
                    NO VALUES EXIST FOR THIS DROPDOWN!
                </div>
            </div>
            
            <!-- slider -->
            <div ng-switch-when="slider">
                
                <input type ="range"
                ng-model="ctrl.userPreferences.theme[key]"
                min ="{{ctrl.preferenceValues[key].min}}"
                max="{{ctrl.preferenceValues[key].max}}"
                step ="1"
                value ="ctrl.userPreferences.theme[key]" />
                
            </div>
            
            
            <!-- textbox -->
            <div ng-switch-when="textbox">
                <input type="text" 
                ng-model="ctrl.userPreferences.theme[key]"
                />
            </div>
            
            
            <div ng-switch-default>
                <span>{{ value }}</span>
            </div>
        </div>
    </div>
</div>

SCSS

.values{
    border: 1px solid;
    padding: 10px;
    height: 100px;
    width: 200px;
    margin: 10px;
}

JavaScript

function Ctrl() {
    var vm = this;

    // the preferences
    vm.userPreferences = {
        theme: {
            barCount: 400,
            barSize: 2,
            lineSize: 1,
            lineStyle: 'solid',
            lineType: 'spline',
            theme: 'light',
            showLabels: true,
            itemNotInMapping: 'wtf is this doing here?',
            dropdownNoValues: 'no pref values, but in mapping'            
        }
    };
    
    // possible values for preferences (dropdown options)
    vm.preferenceValues = {
        barSize: {
            min: 1,
            max: 5
        },
        lineSize: {
            min: 1,
            max: 11
        },
        lineStyle: [
            'solid',
            'dotted'],
        lineType: [
            'line',
            'step',
            'spline'],
        theme: [
            'light',
            'dark',
            'brownish red?']
    };

    // mapping (can use this for the html templates)
    vm.mapping = {
        barSize: 'slider',
        lineSize: 'slider',
        lineStyle: 'dropdown',
        lineType: 'dropdown',
        theme: 'dropdown',
        barCount: 'textbox',
        showLabels: 'boolean',
        dropdownNoValues: 'dropdown'
    };
}


angular.module('myApp', []);