AngularJS - 根據JSON響應顯示不同的數據

Question

我正在構建一個應用程序，使用AngularJS和Ionic框架，我可以在其中顯示包含幾個不同子類別的數據列表，如下所示。

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

我的問題是，可以有不同的子類別基於該accoount類型（當前帳戶，儲蓄帳戶等）中顯示，並因此需要動態實施。

例如：目前&儲蓄賬戶類型，子域是; - 當前餘額 - 可用餘額

但用於出租&保險其他東西。 - 合同號 - 保單號

以上所有內容均通過檢查參數account_type來顯示。

到目前爲止我所擁有的就是這個。

HTML

<div ng-repeat="user in blance" > 
    <div style="margin: 0px;" class="row" > 

     <h5 class="col account-type" style="text-align: left;" >{{ user.accountType | uppercase}}</h5> 
     <h5 class="col account-number" style="text-align: right;"><span style="font-size:16px; color:#ffffff;">|</span>Acc: {{ user.accountNumber }}</h5> 

     </div> 
     <div style="margin: 0px;" class="row" > 

       <h5 class="col balance-type" style="text-align: left; padding-left:5%; font-size:14px;" ><span style="font-size:20px; color:#ffffff;">|</span>Current Balance </h5> 

      <h5 class="col account-balance" style="text-align: right;font-size:18px; "><span style="font-size:14px;">LKR </span>{{ user.currentBalance | CustomCurrency:'' }}<span style="font-size:14px;"> {{ user.currentBalance | CustomCurrencydecimal }}</span> </h5> 

     </div> 
     <div style="margin: 0px;" class="row" > 

       <h5 class="col balance-type" style="text-align: left; padding-left:5%; font-size:14px;" ><span style="font-size:20px; color:#ffffff;">|</span>Available Balance </h5> 

       <h5 class="col account-balance" style="text-align: right;font-size:18px; "><span style="font-size:14px;">LKR </span>{{ user.availableBalance | CustomCurrency:'' }}<span style="font-size:14px;"> {{ user.availableBalance | CustomCurrencydecimal }}</span> </h5> 


     </div> 
     <hr> 
    </div> 

我想知道是否有處理這個問題的方式AngularJS？請幫忙。

Answer 1

我已經完成了很多次，將所有相關的HTML元素放入容器DIV中並使用ng-show。

對於您的示例，我將爲當前和儲蓄賬戶類型（ng-show="user.account_type===current||user.account_type===savings"）創建一個DIV，併爲所有租賃和保險賬戶類型（ng-show="user.account_type===leasing||user.account_type===insurance"）創建另一個DIV。

如果邏輯變得比一個小的JavaScript代碼片段更復雜，那麼我將它移動到$scope方法中，如isCurrentOrSavingsAccount()。