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

Question

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).

Victor Ribeiro da Silva Eloy · Accepted Answer · 2016-07-03 11:28:11Z

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

Prianca · Accepted Answer · 2016-07-03 11:24:22Z

0

You can store in rootscope/ localstorage/ URL as parameter . The retrieve value on your destination page

answered Jul 3, 2016 at 11:24

Prianca

4842 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related