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

Question

我正在尝试使用 ng-if用于打开和关闭。

我只能将值设置为 true显示 child ，但我无法将值设置回 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>

Live Demo

Answer 1

这就是事件冒泡(向上传播事件)的工作原理。

基本上这种情况发生父元素和子元素都有 click事件绑定(bind)到他们。当您单击内部元素时，它首先调用它自己的单击事件，然后它调用父元素 click通过冒泡该事件来事件。这就是您当前实现中的问题。因此，您需要通过调用 stopPropagation 来停止事件向上传播来自 closeChild 的事件的方法方法。要获取事件对象，您需要通过 $event来自 ng-click 的对象方法可以是$event .

网页

     <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;
}

Demo Plunkr