永続データにngstorageを使用

Question

私のアプリケーションで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: 'sam@tarly.com', 
     firstname: 'Sam', 
     lastname: 'Tarly', 
     telephone: 1234567890, 
     address: 'NY', 

     }, { 
     id: 2, 
     email: 'jon@snow.com', 
     firstname: 'Jon', 
     lastname: 'Snow', 
     telephone:, 
     address: 'The Wall', 
     }, { 
     id: 3, 
     email: 'dany@targaryen.com', 
     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

Answer 1

私の理解から、あなたのための問題は、データを追加し、ページを更新した後、表に示されていない値です。問題は、最初に静的配列の値でデータをロードすることです。データは実際にストレージに追加されます。 $localStorageから最初の読み込みを呼び出すだけです。 self.users = [{..}]をself.users = $localStorage.usersに変更してください。私はplunkrを更新しました。それを見てください。

Plunkr