Joe82 Joe82 - 5 months ago 21
AngularJS Question

AngularJS - Save text input by user and displaying it in a different page

I have a input text like in one page. I would like to store the information from this input with angular, so when moving to another page I could display it in another input text.
I have tried with

ng-model
and
ng-init


<input type="text" ng-model="inputText" ng-init="userText">


Having in the controller

$scope.userText = $scope.inputText;


But it doesn't seem to work. You can see a working plunker here. Thanks in advance!

PS: I need to do it between two pages (not with a single page and then routing).

Answer

basically what happens is that your variables are reseted when you change page. You can achieve what you want using localstorage. Here follows an example

JS:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

  $scope.saved = localStorage.getItem('userText');
    $scope.userText = (localStorage.getItem('userText')!==null) ? $scope.saved : "";


  $scope.editText = function(){
    localStorage.setItem('userText', $scope.userText);
  } 

});

PAGE 1:

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <a href="index.html">Home</a>
  <a href="anotherpage.html">Another page</a><br><br><br>
  <input type="text" ng-model="userText" ng-keyup="editText()">

</html>

PAGE 2:

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <a href="index.html">Home</a>
  <a href="anotherpage.html">Another page</a><br><br><br>
  <input type="text" ng-model="userText" ng-keyup="editText()">
  <h1>This is Another Page!</h1>
</body>

</html>

please check this plunker: http://plnkr.co/edit/eyywQGgWjhC8gS7Wprcw?p=preview

Comments