AngularJS - 显示弹出卡列表？答案

【问题标题】：AngularJS - show popup card-list?AngularJS - 显示弹出卡列表？
【发布时间】：2014-09-11 06:41:34
【问题描述】：

我正在使用Ionic 框架来开发一个应用程序并具有如下图所示的视图，并且我希望在用户点击文本字段Account No: 和Destination A/C: 时出现一个弹出卡片列表，即card-list 将使用对 Web 服务的调用来填充。

我是AngularJS 的新手，如果您能帮我提供一个基本示例来完成这项工作，我将不胜感激。

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

fundtransfer.html

 <div class="list" ng-controller="PostsCtrl">


          <div class="panel-heading">
            <h3 class="panel-title">
              Fund Transfer
            </h3>
          </div>


        <div class="list">
            <label class="item item-input item-floating-label">
                <span class="input-label">Account No:</span>
                <input type="text" id="accNo" name="accNo" ng-model="accNo" ng-model-options="{updateOn: 'blur'}" placeholder="Account No:">
                    </label>
            <label class="item item-input item-floating-label">
                <span class="input-label">Destination A/C:</span>
                <input type="text" id="desAccNo" name="desAccNo" ng-model="desAccNo" ng-model-options="{updateOn: 'blur'}" placeholder="Destination A/C:">
                    </label>
            <label class="item item-input item-floating-label">
                <span class="input-label">Amount</span>
                <input type="text" id="amount" name="amount" ng-model="amount" ng-model-options="{updateOn: 'blur'}" placeholder="Amount:">
                    </label>
        </div>


             <a class="btn btn-primary btn-block" ng-click="submit()">Transfer</a>

          </div>

【问题讨论】：

我可以推荐官方 AngularJS 教程吗？这个很不错。 docs.angularjs.org/tutorial
当您说“弹出卡片列表”时，您可能是指包含卡片列表的 Ionic Modal 视图打开？
@JeremyWilken 是的。我使用了 Ionic Modal 视图来完成它，但它占据了整个窗口。知道如何将它放到中心，比如在弹出窗口中吗？

标签： angularjs popup ionic-framework

【解决方案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;
}

【讨论】：