Question

目标：我想根据复选框的状态显示div的内容，但也希望默认显示这些div

假设我有以下代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app>
<label>red <input type="checkbox"  ng-model="red"  /></label><br />
<label>blue <input type="checkbox"  ng-model="blue"   /></label><br />
<div ng-show="red" style="width: 50px; height: 50px; background-color: red;"></div><br />
<div ng-show="blue" style="width: 50px; height: 50px; background-color: blue;"></div><br />
<div ng-show="red" style="width: 50px; height: 50px; background-color: red;"></div><br />
</body>
</html>

使用此代码，默认情况下不会检查我的2个复选框，每当我选中其中一个复选框时，每个div都会正确显示

现在我试图追加：

ng-checked='true'

默认情况下，我的复选框现在已被选中，但div仍未显示。我尝试使用某些ng-init，ng-hide或ng-load，但我对Angular的经验非常有限。

任何人都可以指出我的方向吗？

Answer 1

ng-checked不适用于ng-model

如果您想更改复选框，请更改其模型值：

$scope.red=true;

另请注意，您应始终使用ng-model中的对象，否则您将因子范围而永远遇到绑定问题

Answer 2

ng-init似乎有效。

<label>red <input type="checkbox"  ng-model="red" ng-init="red=true" /></label><br />

小提琴：http://jsfiddle.net/bn8bn3nc/

见S.O.题： Angular js init ng-model from default values

div默认情况下使用角度js和ng-show不可见

2 个答案: