2017-04-03 103 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:讓我檢查 –