在Angular中添加动态单选按钮

Question

我在Angular中工作的只是一个普通的旧JS函数，该函数从API返回数据列表。 然后，我将数据变成如下所示的单选按钮：

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);
      }

从JS端工作得很好，但是Angular端无法识别出每个都有“未定义”错误的“ user.role”或“ $ scope.user.role”。 这是因为此输入在部分输入方面有些不同吗？ 还有吗 似乎是一些问题暗示了Angular并没有真正做好这些事情……编辑：这不是表单中的唯一输入。 其余的已从API收集或返回。 因此，不确定我是否可以针对范围进行编译，似乎有点过分回答。 我当然可能是错的。

Answer 1

woou，我最好更改API，而不是在您的JS代码中添加$compile ！

API应该返回jsonObj然后您可以轻松地在Angular中构建View。

也不是做这样的事情的Angular方法：

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

我假设您的JSON如下所示：带对象的数组。

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

然后，您的HTML应该如下所示：

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

Answer 2

您需要编译DOM元素才能使它有角度地拾取它。

有关示例，请参见文档： https : //docs.angularjs.org/api/ng/service/$compile

正如@pankajparkar指出的那样，您可以执行$compile($("#userRoleEntry"))($scope)来编译您的元素。