保存当前选中< li >在Angular页面刷新后

我有一个侧边栏对应用程序是全局的，它的HTML位于main.html中，我也有一个UI视图，根据状态注入部分HTML，如特定商店，零售商等的信息保存当前选中< li >在Angular页面刷新后

当我点击侧边栏< li>元素时，它们变为“活动”并突出显示，而前一个变为不活动。它工作正常，但是，当我刷新我的页面时，“活动”< li>丢失，它会回到默认“活动”< li>。

我正在考虑在每个控制器页面上，通过ID传递的参数和id标签分配给元素，如< id =“store_1”>，搜索特定元素，并使其“活跃”。然而，这是部分DOM操作，它不应该在控制器上完成，但我不知道另一种选择！

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

2016-04-07 Forget

您可以创建一个服务来处理将当前选定的项目保存到您选择的永久性存储。这可能是饼干，webstorage，其余的电话...

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>

来源

2016-04-07 16:27:42

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

.factory('ActiveState', function(){ 

    return { 

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


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

来源

2016-04-07 16:23:26 akniazi

保存当前选中< li >在Angular页面刷新后

回答

相关问题