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

【问题标题】：AngularJS - Show different data based on JSON responseAngularJS - 根据 JSON 响应显示不同的数据
【发布时间】：2014-10-19 11:03:18
【问题描述】：

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

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

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

例如：对于活期和储蓄账户类型，子字段是； - 当前余额 - 可用余额

但对于租赁和保险，它是另一回事。 - 合同号 - 政策没有

以上所有内容都通过检查参数 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 方法来处理这个问题？请帮忙。

【问题讨论】：

标签： javascript html json angularjs ionic-framework

【解决方案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 sn-p 更复杂，那么我将其移动到 $scope 方法中，例如 isCurrentOrSavingsAccount()。

【讨论】：