Question

我使用angularjs和bootstrap（我是角度初学者）。我的应用中有很多list-group，如果用户尚未点击该项，我需要在每个应用中显示badge。第一次点击后，徽章将被删除（即使用户刷新页面，也应该再次显示）。

由于它在应用程序中经常出现，我不知道要正确地执行此操作... 我不想使用大量的布尔或会话存储来检查用户是否有点击。你看到用棱角分明的方法吗？

仅供参考，这是我的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;
        };
    }
]);

属性徽章应在第一次点击时变空，即使用户离开应用也会保持为空。

Answer 1

建议您通过某些数据库或某些第三方会话提供程序执行此操作，以补充您的Web应用程序。

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

我只在这里展示了实现的角度服务，它将东西存储到本地存储中。其余的代码在下面插入：

  .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));
    };
  })

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

普兰克：http://plnkr.co/edit/nvDmA9ipCNhL2DD14AGz?p=preview

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

1 个答案: