Question

我正在使用AngularJS和Ionic框架构建应用，在那里我可以显示包含每个列表项的几个不同子类别的数据列表，如下所示。

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

我的问题是，根据会计类型（经常账户，储蓄账户等）可以显示不同的子类别，因此需要动态实施。

例如：for Current＆amp;储蓄账户类型，子字段是; - 当前的平衡可用余额

但是对于租赁和保险别的。 - 合同号 - 政策号

通过检查param 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()。

AngularJS - 根据JSON响应显示不同的数据

1 个答案: