AngularJS - 显示弹出式卡列表？

我正在使用Ionic框架来开发一个应用程序，并具有如下图所示的视图，我想要一个弹出式卡列表出现在用户点击文本框Account No:和Destination A/C:时，卡列表将被填充使用对Web服务的调用。AngularJS - 显示弹出式卡列表？

我是一个新手到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>

来源

2014-09-11 Mahesh De Silva

我可以建议官方AngularJS教程？这个很不错。 https://docs.angularjs.org/tutorial – 2014-09-11 07:18:05

当你说'弹出卡列表'你是否意味着一个包含卡片列表的离子模态视图打开？ – 2014-09-11 23:56:41

@JeremyWilken是的。我用一个离子模态视图来完成它，但它占据了整个窗口。任何想法如何让它到达中心，就像在弹出窗口？ – 2014-09-12 03:59:41

你可以使用离子模态分量，并重写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; 
}

来源

2014-09-16 04:21:27

AngularJS - 显示弹出式卡列表？

回答

相关问题