AngularJS ng-model form driven by ng-repeat over UI model description data how to?

Question

The JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ illustrates a (working) "UI modeling" idea I had with AngularJS; note the form is not actually coded out in the HTML template, it's driven by uimodel JSON (which in turn describes how the datamodel is to be rendered/edited):

<div ng-repeat="auimodel in uimodel">
    <label>{{$index + 1}}. {{auimodel.label}}</label>
    <input ng-model="datamodel[auimodel.model]" type="{{auimodel.type}}" />
</div>

Trouble is, as soon as my 'model' isn't a simple property, but a 'path', then my square bracket dynamic keys 'trick' doesn't work anymore of course.. as illustrated by the (broken) http://jsfiddle.net/vorburger/8CxRC/1/ JSFiddle. Any suggestions how one could do this?

PS: Or would something like this necessarily need a complete custom directive rather sooner than later? I’d rather not have to do this, if that’s possible at all, in order to keep creation & maintenance of such UI model “meta templates” as simple as possible...

vorburger · Accepted Answer · 2013-07-24 20:38:04Z

0

I've just figured out one (but may be not the best?) way to achieve this myself.. see http://jsfiddle.net/vorburger/8CxRC/3/ - basically still based on my square bracket dynamic keys 'trick', but with some pre-processing:

   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;
    }

answered Jul 24, 2013 at 20:38

vorburger

4,07837 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vorburger Over a year ago

while this works, it doesn't solve a related problem with input/name + span/ng-show illustrated on jsfiddle.net/vorburger/8CxRC/4... somehow it probably gets bound too early or something like that? Any help by AngularJS super guru wizards much appreciated!

vorburger Over a year ago

Thanks to @sza help on another Q, it now works in latest fiddle

vorburger Over a year ago

duh, only kinda works.. Fiddle #7 illustrates how dynamically setting input type is still NOK :(. Hopefully Issue 1404 will completely fix this.

Richard Kennard · Accepted Answer · 2013-07-24 23:10:32Z

0

You are along the same lines as my own project Metawidget. Metawidget's equivalent to what you are after is covered by metawidget.angular.widgetprocessor.AngularWidgetProcessor:

https://github.com/metawidget/metawidget/blob/master/modules/js/angularjs/src/main/webapp/lib/metawidget/angular/metawidget-angular.js

Although I didn't find the need to use the square bracket notation (I just did foo.bar.baz). Also the magic line:

$compile( widget )( scope.$parent );

Which turns the raw HTML you instantiate dynamically into fully-functioning Angular code.

If you get chance to take a look at Metawidget, I'd appreciate your feedback! Tutorial starts here.

answered Jul 24, 2013 at 23:10

Richard Kennard

1,33511 silver badges21 bronze badges

2 Comments

vorburger Over a year ago

Hi, sounds interesting, but.. I am not (yet) able to understand how to apply your AngularWidgetProcessor etc. to my approach.. in Metawidget, you don't really have a "meta template" as in my design (or do I misunderstand?) - so where would I do this? I don't suppose you have the time to adapt my JSFiddle to illustrate what you mean? ;-) (Or even show my complete github.com/vorburger/MUI.js rewritten in Metawidget?)

Richard Kennard Over a year ago

Sure, here is your JSFiddle using Metawidget: jsfiddle.net/8CxRC/10 Metawidget's template's are done programmatically (see metawidget.layout.TableLayout) rather than in your HTML page, as this lets us do things like a) business logic in the layout and b) composing multiple layouts together, such as tabs wrapped around different sections

Collectives™ on Stack Overflow

AngularJS ng-model form driven by ng-repeat over UI model description data how to?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related