将数据传递到ng-repeat中的离子弹出窗口

Question

我想将离子Popover添加到我的应用程序中并置于ng-repeat下但是我对此有点挣扎.

如何将参数传递给它？

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

所以简而言之我想要一个按钮列表,每当我点击按钮的弹出窗口时,都会有一个删除元素的选项.

Answer 1

请参阅此演示:http ://play.ionic.io/app/eb32466d892c
您可以将控制器的范围传递给弹出窗口,因此无论您在父控制器中拥有什么,都可以弹出.在openpopover函数中传递参数索引:ng-click = "openPopover($event, pass-index-here)">在打开弹出窗口之前将其绑定到$ scope.index,请参阅:

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

现在这$scope.index将在popover中可用,并且将包含您点击的最新项目索引,因为我们在打开popover之前更新其值:

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