Question

Tabs.html

我在不同标签页下有两个单独的列表（例如商店列表和优惠券列表）。我需要在选项卡上显示徽章，以显示每个列表中的金额而不是显示的通用数字

Answer 1

您可以使用badge指令中的badge-style和<ion-tab>属性。代码中唯一需要的更改是将列表的长度公开给应用程序的根目录。这可以使用$ rootScope或带有事件广播的父控制器

来完成

每当列表更新的长度更新时，在控制器中更改计数：

<强>控制器

$rootScope.home = {
  itemCount: $scope.items.length
}

<强> HTML

 <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" 
       badge="home.itemCount"
       badge-style="badge-balanced" 
       icon="ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

</ion-tabs>

此代码集中提供了一个工作示例：http://codepen.io/anon/pen/aNxNvm

离子选项卡徽章 - 如何计算不同页面列表中的项目？

1 个答案: