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()。