AngularJs ng-if不适用于嵌套的ng-if

发布时间：2020-12-17 07:49:06 所属栏目：安全来源：网络整理

导读：在下面的代码中,单击第一个复选框时,第二个复选框不起作用. 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.j

在下面的代码中,单击第一个复选框时,第二个复选框不起作用.

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创建了它自己的范围.

你在我称之为“内部范围1”的内部设置了checked1.然后在“外部范围”中使用它. “外部范围”无法看到“内部范围1”,因此javascript在“外部范围”上创建一个新变量checked1.现在你有两个完全不同的变量,它们都被称为onchecked1-一个在“外部范围”上,一个在“内部范围1”上.这不是你想要的.

要解决此问题,您需要在与使用它相同的范围上设置checked1 – “外部范围”. “Outer 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!