Question

我制作了一些带有引导程序的折叠面板。然后添加了一个方法来“关闭”并使用角度移除面板。唯一的问题是，当我关闭面板时，折叠，打开/关闭功能仍然有效。所以面板可能会打开然后消失，当它真的应该消失时。

以下是HTML的简化版

    <div class="panel-group">
    <div class="panel panel-info fadein fadeout" ng-repeat="p in panels">
        <div class="panel-heading" data-toggle="collapse" data-target="#test_{{p}}" style="cursor:pointer">
            <h4 class="panel-title">
                open / close - {{p}}
                <span class="glyphicon glyphicon-remove pull-right" ng-click="close(p)"></span>
            </h4>
        </div>

        <div id="test_{{p}}" class="panel-collapse collapse" aria-expanded="false">
            <div class="panel-body">
                hello {{p}}
            </div>
        </div>
    </div>
</div>

和angularJS

angular.module('app', ['ngAnimate'])

.controller('controller', function($scope){

    var i = 4;

    $scope.panels = ['panel_1', 'panel_2', 'panel_3']

    $scope.add = function(){
        console.log('add');
      $scope.panels.push('panel_' + i++);
    }

    $scope.close = function (p) {

        console.log('close ' + p);

            for (var i = 0; i < $scope.panels.length; i++){
                if ($scope.panels[i] == p){
                    $scope.panels.splice(i, 1);
            }
        }

        }
});

做一个小提琴来说明：

https://jsfiddle.net/fiddlejan/82bmcyt0/

单击关闭时，右侧的十字形。面板将“打开”，然后消失（fadeOut动画似乎在这里不起作用）。我想关闭按钮，只需在单击关闭时删除面板。不是“打开”或“关闭”面板。

因此，如果单击关闭按钮，面板将折叠，应禁用打开/关闭功能。

Answer 1

将事件对象添加到ng-click定义：

<span class="glyphicon glyphicon-remove pull-right" ng-click="close(p, $event)"></span>

在事件处理程序中使用该对象：

    $scope.close = function (p, e) {

            console.log('close ' + p);


        for (var i = 0; i < $scope.panels.length; i++){
            if ($scope.panels[i] == p){
                $scope.panels.splice(i, 1);
        }
    }
    e.stopPropagation();

    }

在“关闭”单击时禁用在引导程序中折叠动画

1 个答案: