AngularJS 选项卡通知答案

【问题标题】：AngularJS tabs notificationsAngularJS 选项卡通知
【发布时间】：2019-12-22 21:07:04
【问题描述】：

我正在寻找一种在 AngularJS 中实现“标签通知”的方法，以表明有需要注意的警报。类似的东西：

      (1)           (3)
TAB_ONE      TAB_TWO      TAB_THREE

您对如何做到这一点有什么建议吗？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

我将使用一个 UI 框架，例如 Bootstrap。然后我将有一个控制器来保存徽章的计数器。

(function() {
  var app = angular.module("tabbadges",[]);
  app.controller("badgesController", badgesController);
  function badgesController($scope) {
    $scope.badges = {
      tab1: 4,
      tab2: 6,
      tab3: 2
    };
  }
})();

然后我将为视图创建 html

<ul class="nav nav-tabs">
    <li class="nav-item">
       <a class="nav-link active" href="#">Tab one
      <span class="badge badge-pill badge-primary">{{badges.tab1}}</span>
</a>
  <li class="nav-item">
      <a class="nav-link" href="#">Tab two
          <span class="badge badge-light badge-primary">{{badges.tab2}}</span></a>

    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab three  <span class="badge badge-light badge-primary">{{badges.tab3}}</span></a>
    </li>
</ul>

[Codepen] (https://codepen.io/xaviguardia/pen/LYEybvZ)

【讨论】：