javascript - AngularJS 选项卡通知

Question

我正在寻找一种在 AngularJS 中实现“选项卡通知”的方法，以指示存在需要处理的警报。像这样的东西:

      (1)           (3)
TAB_ONE      TAB_TWO      TAB_THREE      

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

Answer 1

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

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

然后我将为 View 创建 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>

[代码笔] ( https://codepen.io/xaviguardia/pen/LYEybvZ )