如何使用 angularjs 和 bootstrap 的徽章正确管理“一次性”事件？答案

【问题标题】：How to properly manage "one time" event with angularjs and bootstrap's badges?如何使用 angularjs 和 bootstrap 的徽章正确管理“一次性”事件？
【发布时间】：2026-02-07 12:50:01
【问题描述】：

我使用 angularjs 和 bootstrap（我是 angular 的初学者）。我的应用程序中有很多list-group，如果用户尚未单击该项目，我需要在每个badge 上显示。一旦第一次点击，徽章就会被移除（即使用户刷新页面，它也会再次出现）。

由于它在应用程序中确实经常出现，我不知道如何正确执行此操作... 我不想使用大量的布尔或会话存储来检查用户是否有点击。你觉得用 angular 来做这件事的好方法吗？

仅供参考，这是我现在的 HTML：

<div class="list-group">
    <a ng-repeat="item in itemList" 
       ng-click="select(item)" 
       ng-class="{active: selected === item}"
       class="list-group-item">
        {{item.name}} <span class="badge">{{item.badge}}</span> 
    </a>
</div>

还有我的控制器：

app.controller('myCtrl', ['$scope',
    function ($scope) {
        $scope.itemList = [{
            name: 'Lorem',
            badge: 'New'
        }, {
            name: 'Ipsum',
            badge: 'New'
        }];

        $scope.select = function (item) {
            $scope.selected = item;
        };
    }
]);

属性 badge 在第一次点击时应该为空，即使用户离开应用程序也保持为空。

【问题讨论】：

当元素被点击时，你到底想要什么？清除跨度班徽章？删除 span.badge 元素？
为什么要在客户端管理所有列表项？如果您受到这种限制，我建议您依赖浏览器本地存储...
@borjagómez 我只想不为用户显示徽章。我用badge: '' 进行了测试，它可以工作。但我不知道如何自动化它。
@deostroll 这是一些“业务需求”，大部分数据应该在客户端进行管理。我是否应该使用“状态”来管理每个项目以了解它是否已经被访问过？

标签： javascript angularjs twitter-bootstrap badge

【解决方案1】：

建议您通过一些数据库或第三方会话提供程序来补充您的 Web 应用程序。

或者，如果您坚持在客户端浏览器上实现此功能，您可以利用浏览器的本地存储。

我在这里只展示了将内容存储到本地存储的 Angular 服务。其余代码在下面的 plunk 中：

  .service('todosvc', function($window) {
    var stg = $window.localStorage.getItem('todos');
    if(!stg || (typeof stg === 'string' && stg.length === 0)) {
      todos = []
    }
    else {
      todos = angular.fromJson(stg);  
    }

    this.get = function() {
      return todos;
    };

    this.update = function() {
      $window.localStorage.setItem('todos', angular.toJson(todos));
    };
  })

现在如果你碰巧刷新页面，你会发现相同的项目仍然存在。

Plunk：http://plnkr.co/edit/nvDmA9ipCNhL2DD14AGz?p=preview

【讨论】：