Adding Dynamic Radio Buttons in Angular

Question

I'm working in Angular with just a plain old JS function that returns a list of data from an API. I then turn the data into radio buttons like this:

function parseRoles(jsonObj) {
        console.log("passed: " + jsonObj);
        var tempRoleArray = [];
        for (var i = 0; i < jsonObj.role.length; i++) {
          tempRoleArray.push("<input type='radio' ng-model='user.role' value='" + jsonObj.role[i].role + "'>" + jsonObj.role[i].description + "&nbsp;");       
        }
        $("#userRoleEntry").html(tempRoleArray);
      }

Works great from the JS side but then the Angular side doesn't recognize "user.role" or "$scope.user.role" with "not defined" errors for each. Is this because this input is a little different in the partial? Something else? Seems to be some questions alluding to Angular not really doing these kinds of things all that well... EDIT: This is not the only input in the form. The rest of them have been collected or returned from the API. So not sure I can compile against scope and seems like kind of an overkill answer. I could be wrong about that, of course.

you need to compile that element using $compile,you could simply do $compile($("#userRoleEntry"))($scope) — Pankaj Parkar
– Pankaj Parkar, Commented Jun 30, 2015 at 18:57

Betty St · Accepted Answer · 2015-07-01 08:00:33Z

1

woou, I would better change the API instead of adding $compile to your JS code!

The API should return the jsonObj and than you can easily build your View in Angular.

Also it is not the Angular-way to do something like this:

$("#userRoleEntry").html(tempRoleArray);

I assume that your JSON looks like this: An array with Objects.

$scope.roles = [{role: 'test', description: 'text'}]; // your "jsonObj.role"

Then your HTML should look like this:

<div ng-repeat="obj in roles">
  <input type="radio" ng-model="user.role" ng-value="obj.role"> {{obj.description}}
</div>

edited Jul 1, 2015 at 8:00

answered Jun 30, 2015 at 21:21

Betty St

2,91024 silver badges37 bronze badges

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

5 Comments

Raydot Over a year ago

The API returns the JSON object in my original post as jsonObj. And you are correct, that is the jQuery way of doing things, not the Angular way.

Raydot Over a year ago

My way of saying, an improvement on this would be great!

Raydot Over a year ago

Ok, one last trick question. All of the checkboxes should be checked except the last. Is there a way to handle that?

Betty St Over a year ago

These are radio inputs so I am not sure if it's possible to check more than 1 ;)

Raydot Over a year ago

Oh holy stupid holes I meant checkboxes...doesn't matter, I get the general gist. Thanks!

vogonsPoetry · Accepted Answer · 2015-06-30 20:07:27Z

0

You need to compile the DOM element in order to have angular pick it up.

See doc for examples: https://docs.angularjs.org/api/ng/service/$compile

As @pankajparkar points out, you can do $compile($("#userRoleEntry"))($scope) to compile your element.

edited Jun 30, 2015 at 20:07

answered Jun 30, 2015 at 19:01

vogonsPoetry

215 bronze badges

1 Comment

Raydot Over a year ago

Sorry, I see what you're getting at but I think you misunderstand my question. Thank you though!

Collectives™ on Stack Overflow

Adding Dynamic Radio Buttons in Angular

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related