Question

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

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>

Answer 1

如上所述，ng-if创建了自己的范围。

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

enter image description here

要解决此问题，您需要在与您使用相同的范围设置checked1 - “外部范围”。 “外部范围”是“内部范围1”的父级，因此我们可以像$parent.checked1一样使用：

<input type="checkbox" ng-model="$parent.checked1" ng-init="checked1=true" />

现在只有checked1的一个副本 - “外部范围”上的副本。它有效，请查看这个更新的plunker：http://plnkr.co/edit/XaPWYvYLrFRZdN2OYn6x?p=preview

Answer 2

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>

的 Plunk

Answer 3

您可以使用ngShow代替ngIf。 ngShow有帮助，因为它没有创建子范围。查看结果here。

Answer 4

问题来自于您正在为数据模型使用基本类型（布尔值）。通常，它承认您不应该使用基本类型进行双向数据绑定。如果您想知道为什么我鼓励您阅读这个article重要部分：

这意味着，如果属性在本地范围内发生更改，则不会使用这些更改更新该属性的原始/父版本。

在您的情况下，发生的事情是： - 您正在使用基本类型布尔值 - ngIf在继承父范围时创建/销毁其范围 - 在ngIf本地范围内进行的每个更改都不会传播到父级。 - 因此没有嵌套if的更新。

要解决此问题，请使用JS对象保存复选框值，如下所示：

<body>
  Click me:
  <input type="checkbox" ng-model="checkboxes.first" ng-init="checkboxes = {first : true, second:true, third:true}" />
  <br/>Show when checked:
  <span ng-if="checkboxes.first==true" class="animate-if">
  <input type="checkbox" ng-model="checkboxes.second" />
 </span>
  <br>
  <span ng-if="checkboxes.second==true" class="animate-if">
  test <input type="checkbox" ng-model="checkboxes.third"/>
 </span>

</body>

请注意，复选框现在绑定到js对象内的布尔值。

Modifyied working Plunker over here

Answer 5

我认为这个问题与不嵌套ng-if这一事实有关。这两个span标签是兄弟姐妹。

所以，我的理论是，当编译阶段发生时，ng-if所依赖的Third无法执行。因此，它无法构建模板的整个Third部分。

This plunker正在运行（使用嵌套元素）。

<div>First <input type="checkbox" ng-model="first" ng-init="first = true"/></div>
<div ng-if="first">
  Second  <input type="checkbox" ng-model="second" ng-init="second = true"/>
  <div ng-if="second">
    Third  <input type="checkbox" ng-model="third" ng-init="third = true"/> 
  </div>
</div>

如果我更改了我的plunker to this，它就无法正常工作（与兄弟姐妹一起）：

<div>First <input type="checkbox" ng-model="first" ng-init="first = true"/></div>
<div ng-if="first">
  Second  <input type="checkbox" ng-model="second" ng-init="second = true"/>
</div>
<div ng-if="second">
  Third  <input type="checkbox" ng-model="third" ng-init="third = true"/> 
</div>

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

5 个答案: