Question

我正在尝试向我的离子标签添加徽章，使用以下代码可以正常使用徽章：

 <nav class="tabs tabs-icon-bottom tabs-positive">
    <a class="tab-item" ng-click="showVenue('venue')"><i class="icon ion-waterdrop"></i>Venue</a>
    <a class="tab-item" ng-click="showComments()"><i class="icon ion-ios-chatbubble"></i>Comments</a>

    <a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
    <a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>

    <a class="tab-item" ng-click="showOffer()"><i class="icon ion-pizza"></i> Offers</a>
  </nav>

然而，再添加一个徽章，似乎不会显示或混淆当前视图，例如

地点评论

<a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-calendar"></i> Events</a>
<a class="tab-item" ng-click="showMap()"><i class="icon ion-android-pin"></i>Map</a>

<a class="tab-item" ng-click="showOffer()"><span class="badge badge-assertive">{{detail.events}}</span><i class="icon ion-pizza"></i> Offers</a>

我是在做对吗？

Answer 1

我让它在我当前的项目中工作，唯一的区别是我的2个徽章绑定到2个不同的值。

在这里，您将2个徽章绑定到同一个属性{{detail.events}}，您可以尝试使用2个不同的值吗？

另一个区别是我在使用CSS类时使用<ion-tabs>和<ion-tab>指令。

标签上的多个离子徽章不起作用

1 个答案: