UI Modeling WORKING

see http://jsfiddle.net/vorburger/P8gt8/1/

by vorburger

HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="auimodel in uimodel">
        <label>{{$index + 1}}. {{auimodel.label}}</label>
        <input ng-model="auimodel.modelB[auimodel.modelL]" type="{{auimodel.type}}" />
    </div>
    <br/>
    <p>Name: {{datamodel.person.contact.name}}, Email: {{datamodel.person.contact.email}}</p>
    
    <button ng-click="datamodel.person.contact.name = 'Toto'">Re-Set Name</button>
</div>

JavaScript

var myApp = angular.module('myApp', []).controller('MyCtrl', function ($scope) {
    $scope.datamodel = {};
    $scope.datamodel.person = {};
    $scope.datamodel.person.contact = {
        name: "Ellie",
        email: "[email protected]"
    };
    $scope.uimodel = [{
        label: 'Yer Name:',
        model: 'person.contact.name', 
        type: 'text'
    }, {
        label: 'Yar Email:',
        model: 'person.contact.email',
        type: 'email'
    }];

    for (var i = 0; i < $scope.uimodel.length; i++) {
        var resolvedModelProperty = $scope.datamodel;
        var remainingPath = $scope.uimodel[i].model;
        while (remainingPath.indexOf('.') > -1) {
            var nextPathSlice = remainingPath.substr(0, remainingPath.indexOf('.'));
            resolvedModelProperty = resolvedModelProperty[nextPathSlice];
            remainingPath = remainingPath.substr(remainingPath.indexOf('.') + 1);
        }
        $scope.uimodel[i].modelB = resolvedModelProperty;
        $scope.uimodel[i].modelL = remainingPath;
    }

});