Angular.js：用户未选中复选框，但我需要 ng-change答案

【问题标题】：Angular.js : checkbox is not checked by the user but I need ng-changeAngular.js：用户未选中复选框，但我需要 ng-change
【发布时间】：2014-05-25 10:13:42
【问题描述】：

我有一个自定义的 jquery 插件，它将隐藏真正的复选框并显示一个增强的组件而不是真正的组件。

对于这个代码

<label for="local">
  <input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')"  name="local"  id="local"><span>Local</span>
</label>

插件生成此代码（它在复选框顶部添加一个 div ）

<label for="local">
  <div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
  <input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>

大方块是假的（显示给用户），小方块是真实的。真正的复选框将对用户隐藏。

问题是：当我点击真正的 ng-change 时，当我点击假的 ng-change 时，虽然真实的也被检查过，但它却不起作用。

【问题讨论】：

您是在使用实际的 jQuery 插件，还是通过直接标记或指令来模仿它的功能？
为什么需要隐藏真正的复选框并显示增强组件而不是真正的组件。
@NidhishKrishnan 这是客户要求
@Brocco 我正在使用实际的 jquery 插件。对于选择和单选按钮，我只对复选框没有问题，出现错误
这似乎是一个基本的 jQuery 插件，你有没有考虑在指令中复制逻辑？

标签： html angularjs checkbox angularjs-ng-change

【解决方案1】：

你能改变多少 jQuery 插件？生成的代码有一个ng-click="filterByCoursePlace('test')，这就是为什么如果你点击真正的工作。做你想做的最快的方法是删除每个ng-change/ng-click在你的控制器中添加一个watch：

$scope.$watch('value', function(newVal, oldVal) {
    filterByCoursePlace('test')
});

或者，如果您可以更改插件生成代码的方式，您可以将ng-click 添加到假复选框而不是真实复选框。无论如何，如果您想在 value 被另一个函数（如“resetFilters”按钮）更改时也触发filterByCoursePlace，我会采用$scope.$watch 方式。

【讨论】：

我已经尝试过这种方法（$watch 方法），同样的事情，如果我点击真正的复选框，ng-modal 变量就会更新，如果我点击假的，什么都不会发生跨度>
没有代码有点难；无论如何，我认为问题在于 jQuery 插件如何集成到 angularjs 中。有很多关于如何使用简单指令来做到这一点的教程（例如：amitgharat.wordpress.com/2013/02/03/…）。
感谢您的链接 :) 感谢您的帮助

【解决方案2】：

我最终在假的上面显示了真正的复选框，并用 css 使其不可见（opacity = 0）

这不是完美的解决方案，但确实有效。

【讨论】：