如何关闭在 ng repeat 中创建的弹出窗口

Question

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

js

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


});

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

如何关闭在 ng repeat 中创建的弹出窗口

how to close popovers created in an ng repeat

angularjs

twitter-bootstrap

angular-ui-bootstrap

bootstrap-popover