Question

我在ng-repeat生成的表格中有一些复选框。

复选框的定义如下：

<input type="checkbox" id="chkView{{::myObj.TeamId}}" 
    ng-disabled="disableView(myObj)" 
    ng-click="setViewSelection(myObj.TeamId, this.checked)">

复选框没有ng-model属性，这是故意的。我想直接通过javascript控制每个复选框的checked状态。

由于某种原因，该复选框不响应它在javascript中更新的checked属性。所以如果我在javascript中有这个陈述：

document.getElementById('chkView27').checked = true;`

它会以编程方式工作，我可以做到

console.log(document.getElementById('chkView27').checked);

它会将true打印到控制台。但浏览器中的UI并未反映出这一点。在浏览器中，复选框保持未选中状态。我已经确认事后没有其他任何因素影响复选框的checked属性。用户界面不会更新。这是为什么？

编辑：根据普拉萨德的建议，我试图在$scope.$apply中包装声明，如下所示：

$scope.$apply(function() {
    document.getElementById('chkView27').checked = 'checked';
});

但这只会导致angular抛出“Action has in progress”错误。

https://docs.angularjs.org/error/ $ rootScope / inprog？P0 = $消化

Answer 1

将checked属性设置为字符串“checked”：

entity_id

Answer 2

在javascript中完成的DOM操作不会直接影响DOM，因为它不知道角度。如果您直接在控制器中执行此操作，它将起作用。但是如果你是用普通的javascript做的那么你需要使用$ apply来让你知道你在DOM中做了更改然后angular会为你更新。

当javascript中的checked属性设置为true时，复选框在UI中未显示为已选中状态

2 个答案: