使用 angularjs 使用属性检查取消选中复选框

Posted 2023-05-09

【中文标题】使用 angularjs 使用属性检查取消选中复选框

【英文标题】：check uncheck checkbox using angularjs using attribute

【发布时间】：2020-06-12 17:05:16

【问题描述】：

我想将选中和未选中属性添加到表中的复选框中，我尝试通过 angularjs 中的 jquery 使用它

$('#chksitecolumn_' + item.Id).attr('checked', true)

这里item.Id 是我正在迭代并将其绑定到ng-model 的ID。

还尝试使用 angularjs

var element = angular.element('#chksitecolumn_' + item.Id);
element.attr('checked', 'checked');

但它不工作

这是我的复选框

<input type="checkbox" class="test"  id="chksitecolumn_item.Id"
       ng-model="selected[item.Id]"/>

我正在使用 ng-model 传递一个 ID 作为密钥我想知道除了使用 ng-model 之外，我们可以选中取消选中复选框吗？

【问题讨论】：

你为什么不想使用ng-model？

我正在使用 ng 模型来传递 ID，我知道它可以使用 ng-model 来完成，但我想知道除了使用 ng-model 之外我们可以检查 unckeck 它

您可能不应该混合使用 AngularJS 和 jQuery，但如果必须，请使用 prop('checked', true)，而不是 attr('checked', true) 或 attr('checked', 'checked')。请参阅“属性与属性”in the documentation。

【参考方案1】：

要选中/取消选中，您可以使用ng-checked 指令（documentation）：

<input type="checkbox" class="test" id="chksitecolumn_item.Id"
       ng-checked="checked[item.Id]" />

请注意，您不应将ng-checked 与ng-model 一起使用：

请注意，此指令不应与ngModel 一起使用，因为这可能会导致意外行为。

【讨论】：

我怎样才能在角度绑定它

@Gaurav_0093 使用ng-checked 进行单向绑定。使用ng-model 进行双向绑定。不要在同一个输入元素上同时使用 ng-checked 和 ng-model 指令。

@Gaurav_0093 您可以从控制器将分配的变量设置为真/假