How to use an object array as part of programmticly created angular form?

1,062 views
Skip to first unread message

Niko

unread,
Feb 8, 2012, 6:47:37 PM2/8/12
to AngularJS
Hi all,

Thanks to Igor's and Dean's help I was able to get a basic JSON
defined form working [1].

data = { "contacts": { "name": "A", "type": "phone"}, ... }

but I would like to be able to work with an array for that matter like

data = { "contacts": [{ "name": "A", "type": "phone"}, {"name":
"B", "type": "email"}], ... }

As a angularjs newbie it looks like using the ng:repeat would lead
into the right direction, but introducing it in the following widget
(on the level of subfieldset) didn't work out, so what would the
proper approach then?

angular.widget('my:form', function(element) {

this.descend(true);
this.directives(true);

return function(element) {

var scope = this,
schema = scope.$eval(element.attr('schema')),
model = element.attr('data'),
fieldset = angular.element('<fieldset></fieldset>');

angular.forEach(schema, function processField(field) {
var name = this.model + '.' + field.name,
fieldElStr;

// has hierarchical subforms?
if (field.children) {
var subfieldset = angular.element('<fieldset></
fieldset>');
var legend = angular.element('<legend>' + field.name +
'</legend>');
subfieldset.append(legend);
var addButton = angular.element('<a href=""
ng:click="' + model + '.'+ field.name + '.$add()">add</a>');
subfieldset.append(addButton);
angular.forEach(field.children, processField, {model:
name, curDOMParent: subfieldset});
fieldset.append(subfieldset);
return;
}

// on to the field display...


Thanks,
Niko


[1] http://groups.google.com/group/angular/browse_thread/thread/7fc29b2ed4ff32ab/a99dd409fd4cc4d0

Misko Hevery

unread,
Feb 8, 2012, 7:55:02 PM2/8/12
to ang...@googlegroups.com
could you get this into jsfiddle form?


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


Niko

unread,
Feb 9, 2012, 5:11:33 PM2/9/12
to AngularJS

Niko

unread,
Feb 9, 2012, 5:23:23 PM2/9/12
to AngularJS
Sorry, in the meantime I have update the JavaScript:

http://jsfiddle.net/niko_s/4r2Y8/5/

Point is that I want to be able to express a nested array structure
(contacts), which should be able to be filled with data as well as
dynamically more elements to be added.

Cheers, Niko

Niko

unread,
Feb 12, 2012, 7:24:30 AM2/12/12
to AngularJS
If anyone runs into a similar problem, here is a solution I came up
with in the meantime:

http://jsfiddle.net/4r2Y8/6/

Cheers,
Niko

PS: Angular really simplifies interaction with the model, thanks for
all your efforts!


On 9 Feb., 23:23, Niko <niko.schm...@gmail.com> wrote:
> Sorry, in the meantime I have update the JavaScript:
>
> http://jsfiddle.net/niko_s/4r2Y8/5/
>
> Point is that I want to be able to express a nested array structure
> (contacts), which should be able to be filled with data as well as
> dynamically more elements to be added.
>
> Cheers,Niko
>
> On 9 Feb., 23:11,Niko<niko.schm...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Sure thing:
>
> >http://jsfiddle.net/niko_s/4r2Y8/2/
>
> > Appreciate your help.
> > Thanks,Niko
>
> > On 9 Feb., 01:55, Misko Hevery <mi...@hevery.com> wrote:
>
> > > could you get this into jsfiddle form?
>
Reply all
Reply to author
Forward
0 new messages