Angular.js dynamic field generation

Question

What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.

This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So

The format of the data I need to end up with in the end is a simple array like this:

"school_type": [
    "Government/State",
    "International",
    "Co-educational"
]

This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.

So I can get the fields displaying, but the issues I have are:

The name properties on the radio buttons don't seem to work for each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.

Any help would be appreciated.

Michael Benford · Accepted Answer · 2013-09-14 03:47:21Z

2

There's a couple of problems with your code:

You're not using interpolation where it is needed;
You're not binding the controls to the scope;

Here's your updated code:

<label ng-switch-when="r" class="radio">
  <div ng-repeat="option in options">
    <input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
    <span>{{ option }}</span>
  </div>
</label>
<label ng-switch-when="c" class="checkbox">
  <input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
  <span>{{ options[0] }}</span>
</label>

Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.

And finally, here's a working version of your Plunker.

answered Sep 14, 2013 at 3:47

Michael Benford

14.1k3 gold badges62 silver badges60 bronze badges

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

1 Comment

markstewie Over a year ago

Thanks so much for taking the time to put this together. However what I found was although this worked in Plunker, I was getting errors on my site. To solve I actually realised it was WAY easier without using a directive at all. Everything just worked as soon as I dumped the template I was using in the directive directly into the view. But you're solution certainly helped me greatly to get this going so thanks.

Collectives™ on Stack Overflow

Angular.js dynamic field generation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related