angular 我只能在 `ng-if` 上设置 'true` 但我不能设置 `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

单击 span-element 时，您同时单击了它的父 li-element，因此直接在关闭函数运行之后，显示函数运行。为什么不尝试使用两个单独的子元素将 ng-click 添加到：

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

我编辑了你的 plunker 以证明它有效

Answer 2

你可以在没有 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>

Answer 3

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

基本上这种情况会发生，父元素和子元素都绑定了 click 事件。当您单击内部元素时，它首先调用自己的单击事件，然后通过冒泡该事件来调用父元素 click 事件。这就是您当前实施中的问题。因此，您需要通过从 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>

代码

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

Demo Plunkr

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

angular I can only able to set 'true` on `ng-if` but i can't set `false'

javascript

angularjs

events

angularjs-ng-click

event-propagation