Open and close ui.bootstrap popover within ng-repeat

Question

I have created a plunkr: http://plnkr.co/edit/gUAvoVK7E3llUlFgWIwF?p=preview

I am trying to create a popover element that has a close button within a repeater. I have it sort of working but it opens both items in the repeater. How can I set it up so that it will only open one at a time and update the angular data when closed?

$scope.timePopover = {
templateUrl: 'editActualTime.html',
title: 'Actual/Est Time',
isOpen: false,
 open: function open() {
      $scope.timePopover.isOpen = true;
    },

    close: function close(formActTime) {
      $scope.timePopover.isOpen = false;
    }

};

score 1 · Answer 1 · answered Oct 14 '15 at 14:24

I was unable to get this working with a close button but I did get it working in a way that I'm satisfied with (just some user testing on a prototype) if this can benefit anyone. Here is the plunkr: http://plnkr.co/edit/gUAvoVK7E3llUlFgWIwF?p=preview

<button popover-placement="bottom" uib-popover="{{noStoneTask.actHours}}" class="btn-link" data-toggle="popover" popover-template="timePopover.templateUrl" popover-title="{{timePopover.title}}" type="button" style="color:#FFF;">
                     {{noStoneTask.actHours}}/{{noStoneTask.estHours}}</button>

popover-is-open was creating the issue of them all opening.

score 0 · Answer 2 · answered Oct 13 '15 at 18:28

You have to print the object value instead of the string on popover attributes on your elements :

You have this : <button class="btn-link" data-toggle="popover" popover-template="timePopover.templateUrl" popover-title="{{timePopover.title}}" popover-is-open="timePopover.isOpen" type="button" style="color:#FFF;">

Where instead you need to make this : <button class="btn-link" data-toggle="popover" popover-template="{{ timePopover.templateUrl }}" popover-title="{{timePopover.title}}" popover-is-open="{{ timePopover.isOpen }}" type="button" style="color:#FFF;">

Open and close ui.bootstrap popover within ng-repeat

2 Answers2