Javascript 角度我只能设置'；真的`如果`但我能'；t设置'false'；

我试图使用

ng if

来打开和关闭

我只能将值设置为

true

以显示子项，但无法将值设置回

false

这是我的密码：

var app = angular.module('plunker', []);

var array = [{'name':'one'}, {'name':'two'}, {'name':'three'}];

app.controller('MainCtrl', function($scope) {
    $scope.names = array;
    $scope.showChild = function ( obj ) {
        obj.show = true;
    }
    $scope.closeChild = function ( n ) {
        n.show = false;
    }
});

html:

<ul>
    <li ng-repeat="n in names" ng-click="showChild(n)">
        {{n.name}}
        <h2 ng-if="n.show">
            {{n.name | uppercase }}
        </h2> 
        <span ng-click="closeChild(n)">
            Close
        </span>
    </li>
</ul>

{{n.name}
{{n.name |大写}}
接近

---

单击span元素时，您也在单击它的父li元素，因此在运行close函数后，show函数将直接运行。为什么不尝试使用两个单独的子元素来添加ng单击：

<li ng-repeat="n in names">
            <span ng-click="showChild(n)">{{n.name}}</span>
            <h2 ng-if="n.show">{{n.name | uppercase }}</h2> 
            <span ng-click="closeChild(n)">Close</span>
        </li>

{{n.name}
{{n.name |大写}}
接近

---

我对您的进行了编辑以显示其工作

您也可以在不使用

showChild

控制器功能的情况下执行此操作：

  <ul>
     <li ng-repeat="n in names">
        <span ng-click="(n.show) ? n.show = false : n-show = true">{{n.name}}</span>
        <h2 ng-if="n.show">{{n.name | uppercase }}</h2> 
        <span ng-click="(n.show) ? n.show = false : n-show = true">Close</span>
    </li>
  </ul>

{{n.name}
{{n.name |大写}}
接近

这是事件冒泡（事件向上传播）的工作原理

基本上，这种情况发生在父元素和子元素都有绑定到它们的

click

事件。当您单击内部元素时，它首先调用自己的click事件&然后通过冒泡该事件调用父元素

click

event。这就是您当前实现中的问题所在。因此，您需要通过从

closeChild

方法对该事件调用

stopPropagation

方法来停止事件向上传播。要获取事件对象，您需要从

ng click

方法传递

$event

对象，该方法可以是

$event

Html

     <li ng-repeat="n in names" ng-click="showChild(n)">
        {{n.name }} {{n}}
        <h2 ng-if="n.show">{{n.name | uppercase }}</h2> 
        <span ng-click="closeChild($event, n)">Close</span>
    </li>

---

如果只是关于显示/隐藏，那么使用

ng show

和

ng click

执行相同的逻辑有一种更简洁的方法，而无需自己在控制器中定义任何内容-诀窍是

ng show=“showaadditionalinfo”

和

ng click=“showAdditionalInfo=！显示附加信息

。Angular将定义作用域变量本身。Close按钮也应位于带有ng if的容器下。在和中创建一个div容器，并在div容器中添加ng if。使用您的解决方案，关闭按钮将在关闭后保持显示。@3gwebtrain很高兴帮助您。谢谢。看编辑。我给它加了更多的解释。这会帮助你理解它。谢谢：）困惑了一会儿，为什么这不起作用。好地方。@A谢谢你的欣赏。：）为什么有人要改变他的html结构？而不是通过理解来解决核心问题。。

$scope.closeChild = function(event, n) {
    event.stopPropagation();
    n.show = false;
}