CODEWITHSUNDEEP
angularjsionic-frameworkangularjs-ng-repeat
user4321187
user4321187

Reputation:

Passing data to ionic popover in ng-repeat

I want to add ionic Popover to my application and place in under ng-repeat however I am struggling a bit with this.

How can I pass a parameter to it?

<p ng-repeat="query in ctrl.timesheet">query.Name<button ng-click="openPopover($event)">Open Popover</button></p>

<script id="my-popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
      <button ng-click="ctrl.delete(index)">Delete</button>
    </ion-content>
  </ion-popover-view>
</script>

So in short I want a list of buttons and whenever i click the popover for the button than there is a option to delete the element.

Upvotes: 1

Views: 3400

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

See this demo: http://play.ionic.io/app/eb32466d892c
You can pass scope of your controller to pop over, so whatever you have in parent controller will be available in pop over. Pass a parameter index in openpopover funtion : ng-click = "openPopover($event, pass-index-here)"> and bind it to $scope.index before you open popup, See this:

  $ionicPopover.fromTemplateUrl('my-popover.html', {
        scope: $scope
      }).then(function(popover) {
        $scope.popover = popover;
      });
  $scope.openPopover = function($event,index) {
    $scope.index = {'value' : index}; //i am using object, because simple variable shows binding problem some time
    $scope.popover.show($event);
  };

Now this $scope.index will be available in popover, and will contain latest index of item, which you have clicked because we update its value before opening popover : 

<button ng-click="ctrl.delete(index.value)">Delete</button>

Upvotes: 6

Related Questions