1

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
  • 3,439
  • 32
  • 38

2 Answers2

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;
    }
vorburger
  • 3,439
  • 32
  • 38
  • while this works, it doesn't solve a related problem with input/name + span/ng-show illustrated on http://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 Jul 24 '13 at 23:41
  • Thanks to @sza help on [another Q](http://stackoverflow.com/questions/17865785/angularjs-ng-model-inside-ng-repeat/), it now works in [latest fiddle](http://jsfiddle.net/vorburger/8CxRC/6/) – vorburger Jul 26 '13 at 00:01
  • duh, only kinda works.. [Fiddle #7](http://jsfiddle.net/vorburger/8CxRC/7/) illustrates how dynamically setting input type is still NOK :(. Hopefully [Issue 1404](https://github.com/angular/angular.js/issues/1404) will completely fix this. – vorburger Jul 26 '13 at 00:47
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.

Richard Kennard
  • 1,325
  • 11
  • 20
  • 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 https://github.com/vorburger/MUI.js rewritten in Metawidget?) – vorburger Jul 24 '13 at 23:40
  • Sure, here is your JSFiddle using Metawidget: http://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 – Richard Kennard Jul 26 '13 at 05:03