如何关闭在 ng 重复中创建的弹出框答案

【问题标题】：how to close popovers created in an ng repeat如何关闭在 ng 重复中创建的弹出框
【发布时间】：2018-01-24 11:25:54
【问题描述】：

使用 angular ui bootstrap 我正在创建带有 ng 重复的模态。我在 plunker 中放了一个小例子。

https://plnkr.co/edit/lpaArn6ewYIbIMjHBb2s?p=preview

我正试图弄清楚如何让弹出框彼此独立地打开和关闭，现在它们都同时打开和关闭。

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
    <div style=padding-top:200px;"></div>





    <button ng-repeat = "item in [1,2,3]"
    uib-popover-template="dynamicPopover.templateUrl" 
    popover-title="{{dynamicPopover.title}}" 
    popover-is-open="dynamicPopover.isOpen"
    type="button" 
    class="btn btn-default">
    Popover With Template
    </button>

    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div>{{dynamicPopover.content.header}}</div>
        <button ng-click="dynamicPopover.isOpen = !dynamicPopover.isOpen">close</div>

    </script>

</div>
  </body>
</html>

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {

  $scope.content = {
    header: 'hello world'
  };

  $scope.dynamicPopover = {
    content: $scope.content,
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title',
    isOpen: false
  };


});

【问题讨论】：

创建一个dynamicPopovers数组

标签： angularjs twitter-bootstrap angular-ui-bootstrap bootstrap-popover

【解决方案1】：

您将每个弹出框的状态存储在单个属性dynamicPopover.isOpen 中，但您必须独立存储每个弹出框的状态。从您的示例中，您可以将其存储在 isOpen: [] 数组中：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
  
  $scope.content = {
    header: 'hello world'
  };
  
  $scope.dynamicPopover = {
    content: $scope.content,
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title',
    isOpen: []
  };

 
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="PopoverDemoCtrl">
    <div style=padding-top:200px;"></div>
    
    <button ng-repeat="item in [1,2,3]"
            uib-popover-template="dynamicPopover.templateUrl"
            popover-title="{{dynamicPopover.title}}"
            popover-is-open="dynamicPopover.isOpen[$index]"
            type="button"
            class="btn btn-default">
        Popover With Template
    </button>

    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div>{{dynamicPopover.content.header}}</div>
        <button ng-click="dynamicPopover.isOpen[$index] = !dynamicPopover.isOpen[$index]">close</div>

    </script>

</div>
</body>
</html>

【讨论】：

@Bryan，当然你可以创建一个包含状态的数组。但我认为在你的情况下这没有多大意义，因为你所有的弹出框都有相同的标题和相同的内容，我认为这不是你想要的，因此我建议创建一个带有弹出框的数组，就像我在我对你的问题的评论。祝你好运。