AngularJS在页面刷新后保留选择

时间:2018-07-24 14:18:58

标签: html angularjs local-storage angularjs-select

我有一个像这样的选择标签

 <select ng-model="teamId" 
         ng-options="team.globalId as team.name for team in teamList"
         ng-change="teamOnChange(teamId)">
 </select>

在团队变更中,我保留了LocalStorage中的值,并且在页面刷新时,我还设置了从Localstorage读取的ng-model,但似乎无济于事

我想保留页面刷新上的选定项目,我该怎么做

1 个答案:

答案 0 :(得分:2)

您可以将信息存储到LocalStorage中,也可以使用服务。即

保存在本地存储中

app.service('teamStorage', function() {

   var teamId;
   var teamName;

   //to save the data send it as a parameter obj
   this.saveTeam = function(data) {
        teamId = data.teamId;
        teamName = data.teamName;
        localStorage.setItem('teamInfo', JSON.stringify({
            teamName: teamName,
            teamId: teamId,
        }));
    };
   //to clear your localstorage
   this.clearTeam = function() {
        localStorage.removeItem('teamInfo');
        teamName = "";
        teamId = "";
    };

    //in case you want to get independent variables
    this.getTeamID = function() {
        return teamId;
    };

   this.getTeamName = function (){
        return teamName; 
    }
});

将服务注入您的控制器

app.controller('teamController', function($scope, teamStorage) {
         //you can access your localStorage on load like this

          var myLocalStorage = localStorage.getItem('teamInfo');
           $scope.save = function(teamId) {

              var data = {
               teamID:teamId,
               teamName: myTeam
              }
              //save team in LocalStorage
              teamStorage.saveTeam(data);

            };

           //clear team from LocalStorage
           teamStorage.ClearTeam();

           //get name of team
           $scope.myTeam = teamStorage.getTeamName();

});