在下面的代码中，当单击第一个复选框时，第二个复选框不起作用。
http://plnkr.co/edit/JF0IftvWx7Ew3N43Csji?p=preview
HTML:
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<link rel="stylesheet" type="text/css" href="animations.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:
<span ng-if="checked==true" class="animate-if">
<input type="checkbox" ng-model="checked1" ng-init="checked1=true" />
</span>
<br>
<span ng-if="checked1==true" class="animate-if">
test <input type="checkbox" ng-model="checked2" ng-init="checked2=true" />
</span>
</body>
</html>
最佳答案
如前所述 ng-if创建它自己的范围。
您正在设置 checked1在我所说的“内部范围 1”中。然后在“外部范围”中使用它。 “外部作用域”看不到“内部作用域 1”，因此 javascript 创建了一个新变量 checked1关于“外部范围”。现在 您有两个完全不同的变量，它们都称为 checked1 - 一个在“外部范围”上，一个在“内部范围1”上。这不是你想要的。
要解决此问题，您需要设置 checked1在与您将使用它相同的范围内 - “外部范围”。 “外部作用域”是“内部作用域 1”的父级，所以 我们可以使用 $parent.checked1 像这样:
<input type="checkbox" ng-model="$parent.checked1" ng-init="checked1=true" />
现在只有一份
checked1 - 关于“外部范围”的那个。它有效，请在此更新的 plunker 上查看:http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=preview
关于AngularJs ng-if 不适用于嵌套的 ng-if，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20046760/