在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.

Answer 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>

Answer 2

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.