Question

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

<input type="checkbox" checked>

我当然可以根据自己的喜好删除和添加checked，以便默认选中它。我现在为它添加一个模型（模型尚未在控制器中定义）：

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

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

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

Answer 1

这是因为当元素呈现时，浏览器设置checked属性，然后在复选框上对角度处理ng-model（其值为falsy）并且取消选中它。相反，如果你执行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" />

通过比较查看演示： -

＆＃13;

<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>

＆＃13;

Answer 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" />

Answer 3

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

为什么Angular模型会阻止默认情况下选中复选框？

3 个答案: