Angular：关于表单和复选框问题的 $setPristine答案

【问题标题】：Angular: $setPristine on Form and Checkbox IssueAngular：关于表单和复选框问题的 $setPristine
【发布时间】：2014-12-10 17:11:33
【问题描述】：

我的表单不允许您在第一个条目上选中复选框，这很奇怪。这几乎就像它没有注册点击一样。

但是，如果您提交表单并在提交第一个表单后尝试选中相同的复选框，则它允许您选中复选框。这是为什么呢？

这是我的复选框的样子：

<label ng-repeat="sector in sectors" for="{{sector}}">
  <input type="checkbox" id="{{sector}}" value="{{sector}}" ng-model="newService.sectors[sector]">{{sector}}
</label>

我还在尝试研究如何在此表单上实现$setPristine，以便在提交时为表单提供.ng-pristine 类。

我对 Angular 很陌生，正在慢慢尝试了解这一切是如何运作的。

我在这里设置了一个 Fiddle：http://jsfiddle.net/nh63w6e0/2/

感谢任何帮助。提前致谢！

【问题讨论】：

小提琴加载 Angular 两次，一次来自“框架和扩展”菜单，一次来自“外部资源”。删除一个，它可以工作，关于“不可选中”的复选框。
@NikosParaskevopoulos 我已经删除了外部资源 Angular 包含，但复选框仍然不起作用。 jsfiddle.net/nh63w6e0/5

标签： javascript jquery angularjs forms checkbox

【解决方案1】：

问题

使用您的 JSFiddle 示例，如果您在单击复选框时查看控制台，您将看到错误：

无法设置未定义的属性“健康”

那是因为 $scope.newService 没有被创建，并且您在选中复选框时尝试执行与 $scope.newService['health'] = true 等效的操作。因此，如您所见，$scope.newService 未定义。

解决方案

您应该添加对resetCreateForm 的调用来初始化您的$scope.newService 属性。

JSFiddle（查看最后一行，附上评论）

编辑：

解决您使用 $setPristine 的需要，您可以查看此JSFiddle。

您所要做的就是在表单上添加name 属性并通过其名称将其称为$scope 属性。然后在表单属性上调用$setPristine()。

【讨论】：

啊，我认为拥有$scope.createService = createService 会初始化其中的resetCreateForm。我错了吗？另外，你知道当它被重置时我将如何在这个表单上使用$setPristine 吗？感谢小提琴。
$scope.createService = createService 只是分配给$scope.createService 属性对本地函数createService 的引用。它不会执行函数，所以createService内部的调用resetCreateForm()不会发生。
我不明白你关于 $setPristine 的问题，换句话说，如果你能再试一次。
对不起，如果我没有正确解释。我正在尝试弄清楚如何在提交此表单时使用$setPristine。当我加载页面时，表单有一个类.ng-pristine，但是一旦我选中一个复选框，类就会变为.ng-dirty。我试图弄清楚如何使用$setPristine 将表单设置为原始状态。我希望这是有道理的。哦！并感谢您提供详细描述的答案。标记！
啊，有道理。另外，我没有意识到您可以调用 {{$pristine}} 表达式来检查表单是否是原始的。谢谢你。非常有帮助。