angular我只能在'ng-if`上设置'true`但我不能设置`false'

Question

我正在尝试使用它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>

现场演示

Answer 1

事件冒泡(事件向上传播)如何工作.

基本上发生这种情况,父元素和子元素都有click与它们有关的事件.当你单击内部元素时,它首先调用它自己的click事件然后click通过冒泡该事件来调用父元素事件.这就是您当前实现中的问题.因此,您需要通过stopPropagation从closeChild方法调用该事件的方法来停止向上传播事件.要获取事件对象,您需要$event从ng-click方法中传递对象$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>

码

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

演示Plunkr