AngularJs ng-if不适用于嵌套的ng-if
在下面的代码中,单击第一个复选框时,第二个复选框不起作用.
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>
Kay*_*ave 18
如上所述,ng-if它创造了自己的范围.
你正在设置checked1我所谓的"内部范围1".然后在"外部范围"中使用它."外部范围"无法看到"内部范围1",因此javascript checked1在"外部范围"上创建一个新变量.现在你有两个完全不同的变量checked1 - 一个在"外部范围"上,一个在"内部范围1"上.这不是你想要的.
要解决此问题,您需要设置checked1与使用它相同的范围 - "外部范围"."Ocope Scope"是"Inner Scope1"的父级,所以我们可以$parent.checked1像这样使用:
<input type="checkbox" ng-model="$parent.checked1" ng-init="checked1=true" />
现在只有一个副本checked1- "外部范围"上的副本.它有效,请查看这个更新的plunker:http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=preview
ngIf创造一个不同的范围.用途$parent:
<span ng-if="checked==true" class="animate-if">
<input type="checkbox" ng-model="$parent.checked1"
ng-init="$parent.checked1=true" />
</span>
<br>
<span ng-if="checked1==true" class="animate-if">
test <input type="checkbox" ng-model="$parent.checked2"
ng-init="$parent.checked2=true" />
</span>
| 归档时间： |
|
| 查看次数： |
17977 次 |
| 最近记录： |