【问题标题】:angular checkbox using ng-click to reset the ng-model that is binded to the checkbox, thus prevent the checkbox from being unchecked角度复选框使用 ng-click 重置绑定到复选框的 ng-model,从而防止复选框被取消选中
【发布时间】:2014-08-16 21:57:42
【问题描述】:

我有一些逻辑,在某些情况下,我希望始终选中第一个复选框。因此,如果用户尝试取消选中它,我想使用 ng-click 将绑定到复选框的 ng-model 更改为“true”。但是该复选框仍处于未选中状态....

如何在不使用 angular.element(elem).attr("checked", true) 之类的情况下,根据 ng-model 的值保持复选框处于选中状态

<input type = 'checkbox' ng-model = 'checkboxValue' ng-click = "handler"/>

在控制器中

$scope.checkboxValue = false;
$scope.handler = function(){
    $scope.checkboxValue = true;
}

我希望复选框保持选中状态,因为 ng-model checkboxValue 为 true...但显然我在这里遗漏了一些东西

这是插件:http://plnkr.co/edit/WbjZilFLDfbP3mQ4oMgx?p=preview

我进入调用堆栈,看起来我将 ng-model 设置为 true,然后在 $digest 期间,根据复选框的状态设置 ng-model:选中或未选中。所以它更像是一种方式绑定:根据复选框状态绑定 ng-model?

【问题讨论】:

标签: angularjs checkbox angular-ngmodel


【解决方案1】:

如果您不想让用户取消选中该复选框,您可以使用ng-disabled 指令。

从您的 plunk 中取出一个带有叉子的 plunk。 http://plnkr.co/edit/Y2kUYN2F5bZboaPJWMd8?p=preview

【讨论】:

  • 感谢您提供的信息。大多数时候,该复选框仍然是可选中的。只是在某些情况下阻止用户取消选中它。 :)
  • 您好,您可以查看更新的 plunk。 ng-disabled 可以绑定到任何角度表达式。您也可以将其绑定到函数。对于需要阻止用户取消勾选的情况,该函数可以返回false。
【解决方案2】:

为什么不简单地使用ng-change 在复选框状态的每次更改时调用一些逻辑?

【讨论】:

  • 感谢您的建议。我会尝试的。我不确定为什么这会有所帮助,因为在 ng-click 中,我已经在检查状态更改....对于复选框,无论如何都不要单击更改复选框?我的意思是你点击一次,复选框要么从选中变为取消选中,还是相反?
【解决方案3】:

您可以查看 checkboxValue 的更改,然后根据需要更改它,而不是通过 ng-click 进行挂钩。如果您想要复选框最初为假的行为,然后一旦单击就永远为真,您可以执行以下操作:

$scope.checkboxValue = false;
$scope.$watch('checkboxValue', function(newValue, oldValue){
    $scope.checkboxValue = newValue || oldValue;
});

以下是您的 plunker 所需的更改: http://plnkr.co/edit/XPZXSzsnaZDGlIi8mxnM?p=preview

【讨论】:

    【解决方案4】:

    只需使用ng-change 而不是ng-click

    这是DEMO

    【讨论】:

    • 更新:哦,我突然想到这是因为 ng-change 发生的时间晚于 ng-click,它实际上是在 ng-click 触发后 ng-model 值更改为 true/false 时触发的?

      谢谢你的回答。我在点击处理程序中有一个逻辑来查看复选框状态是否是从选中到取消选中,如果是,请将复选框值设置为 true。为什么这不起作用? ng-change 和 ng-click 每次点击都会触发......我的想法必须是短循环...... ;/
    • 虽然您可以使用 ng-change 来做到这一点,但在更改时重置值并不被认为是良好的用户体验。理想情况下,如果不允许更改值,则应禁用该复选框。
    • @DarshanJoshi:感谢您的建议。你和下面的人是对的,如果不允许更改复选框应该禁用。
    • @snailclimbingtree 很高兴我们能为您提供帮助。 :)
    猜你喜欢
    • 2014-07-12
    • 1970-01-01
    • 2013-05-12
    • 1970-01-01
    • 2013-12-15
    • 2020-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多