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 - 顯示彈出式卡列表？

回答

相關問題