AngularJS - 显示弹出式卡片列表？

Question

我正在使用Ionic框架来开发应用并拥有如下图所示的视图，并且当用户点击文本字段Account No:和{时，我希望显示一个弹出式卡片列表{1}}，使用对Web服务的调用来填充卡列表。

我是Destination A/C:的新手，如果你能帮助我完成一个基本的例子，我将不胜感激。

http://i.stack.imgur.com/Oh4n6.png

fundtransfer.html

AngularJS

Answer 1

您可以使用Ionic模态组件，如果您不希望它是全屏，则覆盖CSS以调整大小。只需要一点CSS来调整模态窗口的大小，然后就可以将卡片组件放在模态中。

<强>标记

<ion-modal-view class="modal slide-in-up ng-enter active ng-enter-active">
  <ion-content>
    <div class="card">
    ...
    </div>
  </ion-content>
</ion-modal-view>

<强> CSS

.modal {
  width: 80%;
  top: 20%;
  left: 10%;
  min-height: 60%; 
  background: none;
}