在 md-checkbox 中选择输入元素将切换复选框答案

【问题标题】：Selecting input element inside md-checkbox will toggle the checkbox在 md-checkbox 中选择输入元素将切换复选框
【发布时间】：2017-09-10 12:44:07
【问题描述】：

在多个复选框的列表中，我有一个“其他”复选框，用户可以在其中插入一些文本。这被定义为：

<md-checkbox class="md-checkbox-interactive" ng-model="$ctrl.someVar">
  <input type="text" placeholder="Placeholder" ng-model="$ctrl.someVarText">
</md-checkbox>

md-checkbox-interactive 类用于允许input 元素上的指针事件：

md-checkbox.md-checkbox-interactive {
  .md-label {
    input {
      pointer-events: all;
    }
  }
}

这取自以下对有关单选按钮的类似问题的回答：https://stackoverflow.com/a/33304119/2051151

但是，每当我选择输入元素时，复选框就会被切换。我在这里错过了什么？

【问题讨论】：

标签： angularjs checkbox angular-material

【解决方案1】：

经过一番搜索，我发现我需要在input元素上添加以下内容：

ng-click="$ctrl.onClickInput($event)"

其中函数定义为：

this.onClickInput = function (event)
{
  // Prevent the click event to propagate
  event.stopPropagation();

  // But toggle the checkbox if necessary
  if (!vm.someVar) vm.someVar = true;
}

这将防止复选框的不必要切换。

【讨论】：