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