为什么 Angular 模型会阻止默认选中复选框？答案

【问题标题】：Why does an Angular model prevent a checkbox from being checked by default?为什么 Angular 模型会阻止默认选中复选框？
【发布时间】：2015-06-02 23:43:56
【问题描述】：

我正在将 Angularjs 用于网站，现在我想使用一个复选框。我首先创建了一个这样的复选框：

<input type="checkbox" checked>

我当然可以删除并添加checked，以使其默认检查或不检查。我现在向它添加一个模型（模型尚未在控制器中定义）：

<input type="checkbox" ng-model="settings.mySwitch" checked>

复选框仍然显示，但突然间checked 完全没有效果了；默认情况下，复选框始终处于未选中状态。

为什么哦，为什么模型会阻止checked 产生任何影响？欢迎所有提示！

【问题讨论】：

标签： javascript html angularjs checkbox

【解决方案1】：

这是因为当元素被渲染时，浏览器设置了checked 属性，然后在复选框（其值为假）上进行角度处理 ng-model 并且它被取消选中。相反，如果您执行ng-checked="true"，它将起作用（因为ng-checked 指令在处理ng-model 后设置属性，因为它的优先级低于ng-model）。 但是你的模型的初始状态会变得混乱（如果使用 1.3.x+），因为ng-checked 不会更新 ng-model 的状态。因此，只需将 ng-model 值设置为 true。

仅用于演示，我使用ng-init（您应该在控制器中设置 ng-model 初始值）。

 <input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />

查看演示并进行比较：-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app>
   <p> With ng-checked {{settings.mySwitch}}
   <input type="checkbox" ng-checked="true" ng-model="settings.mySwitch" />  
   <p> WIth Proper Initialization {{settings.mySwitch1}}
   <input type="checkbox" ng-init="settings.mySwitch1=true" ng-model="settings.mySwitch1" />  
</div>

【讨论】：

【解决方案2】：

改为像这样使用ng-checked：

<input type="checkbox" ng-model="settings.mySwitch" ng-checked="true">

编辑：@PSL 是对的，你应该改用ng-init，因为它会弄乱你的ng-model。

<input type="checkbox" ng-init="settings.mySwitch=true" ng-model="settings.mySwitch" />

【讨论】：

你不应该混合它们，它会弄乱 ng-model 的初始状态。请参阅我的答案中的演示，
确实有效。非常感谢。不幸的是，我还使用引导开关 (github.com/nostalgiaz/bootstrap-switch) 和它的 angualr 指令 (github.com/frapontillo/angular-bootstrap-switch)，当我现在将 bs-switch 添加到输入 ng-checked="true" 时再次没有效果。任何想法如何解决这个问题？
@H_C 因为bs-switch must be working on the ng-model...，更好的做法是设置 ng-model 而不是 ng-checked。
@PSL 你是对的。谢谢 :) H_C，您应该为此使用ng-init。
@Zee 你更新了你的答案并使我的答案无效；）！！但是 ng-init 也不是一个好习惯，因为它不是为此而设计的（我在括号中提到了它）。阅读ng-init doc 中的第一个红色块虽然它仍然会更好地工作，但在控制器中实例化。

【解决方案3】：

这是因为settings.mySwitch的初始值。如果您希望默认选中复选框，那么您应该将初始值设置为 true，而不是添加 checked 属性，因为当 Angular 处理模板时，它将获取其值并相应地呈现选中的属性。

【讨论】：