保存当前选择的<李>在页面刷新后的Angular中

Save currently selected < li > in Angular after page refresh

本文关键字：刷新 Angular 选择 lt 保存 gt      更新时间：2024-03-17

我有一个对应用程序全局的侧边栏，它的HTML在main.HTML中，我还有一个ui视图，根据状态注入商店、零售商等的部分HTML类特定信息。

当我点击侧边栏<li>元素，它们变为"活动"并高亮显示，而前一个元素变为"不活动"。它运行良好，但是，当我刷新页面时，"活动"<li>丢失，并返回到默认的"活动"<li>。

我想在页面的每个控制器上，通过params传递的ID，并将ID标记分配给元素，如<id="store_1">，搜索特定元素并使其"活动"。然而，这是部分DOM操作，不应该在控制器上完成，但我不知道其他选择！

编辑：我记得现在我可以在html文件上做一个简单的脚本并使用JQuery，但我相信这也不是最佳的。

这很简单。查看window.sessionStorage。您可以存储当前所选项目的名称，然后检索它。您可以编写这样的工厂。

 .factory('ActiveState', function (){
   return {
     store_state: function(name){
       window.sessionStorage.setItem('name', name);
     },

    get_state: function(){
      return window.sessionStorage.getItem("name");
    }
   };
 });

您可以创建一个服务来处理将当前所选项目保存到您选择的持久存储中。它可能是饼干，网络存储，休息呼叫。。。

angular.module('MyApp',[]).
controller('MyController',['MySelectionService',function(MySelectionService){
  var myController = this;
  myController.listItems= ["item1","item2","item3"];
  myController.selected = MySelectionService.getSelected();
  myController.changeSelection = function(selectedItem){
      MySelectionService.setSelected(selectedItem);
      myController.selected = MySelectionService.getSelected();
  };
  
}]).
service('MySelectionService',[function(){
  var mySelectionService = {};
  var selected = "item1";
  mySelectionService.getSelected = function(){
    /* Retrieve from persistant storage */
    return selected;
  };
  mySelectionService.setSelected = function(newSelection){
    /* Save to persistant storage */
    selected = newSelection;
  }
  return mySelectionService;
}]);
.selected{
  color:red;  
  
}
li{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="MyApp" ng-controller="MyController as myController">
  <li ng-repeat="listItem in myController.listItems" ng-class="{'selected':listItem === myController.selected}" ng-click="myController.changeSelection(listItem)">
    {{listItem}}
  </li>
</ul>

相关文章：