2017-04-03 104 views
0

我知道如何在我们的应用程序中使用ngstorage来解决问题,即使在刷新后仍然可以使用持久数据。我试着今天以我的形式第一次实施它。但无法弄清楚我出错的地方。有人可以让我知道我要去哪里吗?另外,我正在寻找添加和删除数据的持久功能。使用ngstorage作为持久数据

angular.module('myApp', ['ngStorage']) 
    .controller('AppController', ['$scope', '$localStorage', 
    '$sessionStorage', 
    function($scope,$localStorage,$sessionStorage) { 
     var self = this; 

     self.$storage = $localStorage; 

     self.user = { 
     id: null, 
     username: '', 
     address: '', 
     email: '' 
     }; 
     self.id = 4; 

     self.users = [{ 
     id: 1, 
     email: '[email protected]', 
     firstname: 'Sam', 
     lastname: 'Tarly', 
     telephone: 1234567890, 
     address: 'NY', 

     }, { 
     id: 2, 
     email: '[email protected]', 
     firstname: 'Jon', 
     lastname: 'Snow', 
     telephone:, 
     address: 'The Wall', 
     }, { 
     id: 3, 
     email: '[email protected]', 
     firstname: 'Dany', 
     lastname: 'Targaryen', 
     telephone: 1234987650, 
     address: 'NEBRASKA' 
     }]; 

     self.submit = function() { 
     if (self.user.id === null) { 
      self.user.id = self.id++; 
      alert('Added New User', self.user); 
      self.users.push(self.user); 
      $localStorage.users = self.users; 
     } else { 
      for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === self.user.id) { 
       self.users[i] = self.user; 
       break; 
      } 
      } 
      alert('User updated with id ', self.user.id); 
     } 
     self.reset(); 
     }; 

     self.edit = function(id) { 
     alert('id to be edited', id); 
     for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === id) { 
      self.user = angular.copy(self.users[i]); 
      break; 
      } 
     } 
     }; 

     self.remove = function(id) { 
     alert('id to be deleted', id); 
     for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === id) { 
      self.users.splice(i, 1); 
      $localStorage.users = self.users; 
      if (self.user.id === id) { //It is shown in form, reset it. 
       self.reset(); 
      } 
      break; 
      } 
     } 
     }; 

     self.reset = function() { 
     self.user = { 
      id: null, 
      username: '', 
      address: '', 
      email: '' 
     }; 
     $scope.myForm.$setPristine(); //reset Form 
     }; 

    } 
    ]); 

Plnkr Link

+0

你有麻烦展现附加值,当你刷新页面? –

+0

是的。值正常累加或删除。但是当我重新加载页面时,这些值是看不到的。 – ross

回答

1

从我的理解,对你的问题是表中没有显示增加的数据,并刷新页面后的值。问题在于你最初使用静态数组值加载数据。数据实际上被添加到存储中。你只需要调用$localStorage的初始加载。只需将self.users = [{..}]更改为self.users = $localStorage.users即可。我已经更新了plunkr。请看看它。

Plunkr

+0

@ross:如果它有帮助,请做upvote :) –

+0

不要它不起作用。显示警告框但不会将数据添加到下面的列表中。 – ross

+0

@ross:让我检查 –