将复选框值传递给 Angular 的 ng-click

Posted 2023-03-05

【中文标题】将复选框值传递给 Angular 的 ng-click

【英文标题】：Pass checkbox value to angular's ng-click

【发布时间】：2016-01-30 14:52:02

【问题描述】：

有没有办法将相关输入的值传递给 angular 指令 ng-click？

换句话说，应该在下面替换 this.value：

<input type="checkbox" id="cb1" ng-click="checkAll(this.value)" />

PS。我不想要替代值的解决方法，我只是想知道是否可以将输入值作为参数传递给角度函数。

【问题讨论】：

您能否在 checkAll 中添加更多您想要的代码

在输入上添加一个模型并在方法中传递它

Angular checkbox and ng-click的可能重复

【参考方案1】：

为它分配一个 ng-model 将根据对它的更改返回布尔值：

<input type="checkbox" id="cb1" ng-model="checkValue" ng-change="checkAll(checkValue)" />

最好使用 ng-change 而不是 ng-click

【讨论】：

将 checkValue 作为参数传递没有多大意义，因为它在模型中仍然可用...

@Serge 是的，它允许您控制数据流，如果其他人必须阅读代码，则更容易理解数据来自哪里。

【参考方案2】：

将复选框绑定到一个值并将其传递给ng-click。

<input type="checkbox" ng-model="value" id="cb1" ng-click="checkAll(value)" />

【参考方案3】：

你可以做以下事情：

如果要将 html 组件绑定到角度范围，请使用

ng-model

将ng-click 更改为ng-change 如果您必须在选中和取消选中复选框时绑定一些值，请使用 ng-true-value="someValue" 和 ng-false-value="someValue"

ng-click 和 ng-model 的执行顺序不明确，因为 他们没有定义明确的优先事项。相反，您应该使用 ng-change 或 $scope 上的 $watch 以确保您获得正确的值 模型变量。

感谢musically_ut

Working Demo

<input type="checkbox" id="cb1" ng-model="check" ng-change="checkAll(check)" ng-true-value="YES" ng-false-value="NO"/> Citizen

【参考方案4】：

今天我想做同样的事情，但我发现没有人回答实际问题。这违背了 Angular 的理念，但你可以用“$event.target.checked”替换“this.value”：

<input type="checkbox" id="cb1" ng-click="checkAll($event.target.checked)" />

【讨论】：

$event 不幸在 ng-change 的复选框中未定义

【参考方案5】：

您可以执行以下操作。为我工作。

<input type="checkbox" id="cb1" ng-click="onChecked($event.target.checked)" />

【讨论】：

事件将在此处未定义