AngularJs NG-如果是不工作的嵌套的NG-如果 [英] AngularJs ng-if is not working for nested ng-if
问题描述
在code中的第2个复选框下方点击一号复选框时不起作用。
http://plnkr.co/edit/JF0IftvWx7Ew3N43Csji?p=$p$ PVIEW
HTML
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =animations.css/＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的script.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
点击我：＆LT;输入类型=复选框NG模型=选中NG-的init =检查=真/＆GT;＆LT; BR /＆GT;
当检查显示：
＆LT;跨度NG-IF =检查==真级=动画假设＆GT;
＆LT;输入类型=复选框NG模型=checked1NG-的init =checked1 =真正的/＆GT;
＆LT; / SPAN＆GT;
＆LT; BR＆GT;
＆LT;跨度NG-IF =checked1 ==真正的类=动画假设＆GT;
测试＆LT;输入类型=复选框NG模型=checked2NG-的init =checked2 =真正的/＆GT;
＆LT; / SPAN＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
如前所述 NG-如果创建了它自己的范围。
您在设置 checked1 里面是什么我打电话内范围1。然后用它在外范围。 外范围看不进内部范围1，这样的JavaScript创建了一个新的变量 checked1 的外范围。现在，您有两个完全不同的两个变量叫做 checked1 - 一个在外范围，一个在内Scope1。这不是你想要的。
为了解决这个问题，你需要设置 checked1 在相同的范围内，你会使用它 - 外范围。 外部范围是内Scope1父这样的我们可以使用 $ parent.checked1 像这样：
＆LT;输入类型=复选框NG模型=$ parent.checked1NG-的init =checked1 =真正的/＆GT;
现在，只有一个 checked1 复制 - 对外范围之一。和它的作品，看看在这个更新plunker：<一href=\"http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=$p$pview\">http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=$p$pview
In the code below the 2nd checkbox does not work when the 1st checkbox is clicked.
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>
As noted ng-if creates it's own scope.
You're setting checked1 inside what I'm calling "Inner Scope 1". Then using it in "Outer Scope". "Outer Scope" can't see into "Inner Scope 1" so javascript creates a new variable checked1 on "Outer Scope". Now you have two entirely different variables both calledchecked1- one on "Outer Scope" and one on "Inner Scope1". This is not what you want.
To fix this you need to set checked1 on the same scope as you'll use it- "Outer Scope". "Outer Scope" is the parent of "Inner Scope1" so we can use $parent.checked1 like so:
<input type="checkbox" ng-model="$parent.checked1" ng-init="checked1=true" />
Now there's only one copy of checked1- the one on "Outer Scope". And it works, check it out on this updated plunker: http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=preview
这篇关于AngularJs NG-如果是不工作的嵌套的NG-如果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
