CODEWITHSUNDEEP
angularjs
Joe82
Joe82

Reputation: 1251

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

Upvotes: 0

Views: 914

Answers (2)

Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

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

Upvotes: 2

Prianca
Prianca

Reputation: 484

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

Upvotes: 0

Related Questions