html - How to keep entered data of page1 after navigating back from page2 in AngularJS -
i have 3 pages routing. if entered input , getting result on first page, next navigated second page , came second page first page. want see data entered , result also. here code snippet
index.html
<!doctype html> <html ng-app="scotchapp"> <head> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="script.js"></script> </head> <body ng-controller="maincontroller"> <nav class="navbar navbar-default"> <div class="container"></div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i> home</a></li> <li><a href="#about"><i class="fa fa-shield"></i> about</a></li> <li><a href="#contact"><i class="fa fa-comment"></i> contact</a></li> </ul> </div> </nav> <div id="main"> <div ng-view></div> </div> </body> </html> home.html
<div class="jumbotron text-center"> <h1>home page</h1> billing index : <input type="text" ng-model='billingmapvalue'> <br/><br/> billing value : {{billingmap[billingmapvalue]}} <ng-click=navigate() type="button" value='submit'> <p>{{ message }}</p> </div> about.html
<div class="jumbotron text-center"> <h1>about page</h1> <p>{{ message }}</p> </div> script.js
var scotchapp = angular.module('scotchapp', [ 'ngroute' ]); scotchapp.config(function($routeprovider) { $routeprovider .when('/', { templateurl : 'home.html', controller : 'maincontroller' }) .when('/about', { templateurl : 'about.html', controller : 'maincontroller' }) .when('/contact', { templateurl : 'contact.html', controller : 'maincontroller' }); }); scotchapp.controller('maincontroller', function($scope) { $scope.message = 'everyone come , see how look!'; $scope.billingmapvalue = ""; $scope.billingmap = new array(); $scope.billingmap["zf2"] = "invoice"; $scope.billingmap["zre"] = "credit returns"; $scope.billingmap["zg2"] = "credit memo"; $scope.billingmap["zl2"] = "debit memo"; $scope.billingmap["zs2"] = "cancellation of credit memo"; $scope.billingmap["zs1"] = "cancel. invoice (s1)"; }); now need is. if run index.html page, in home page there 1 input text box. if enter index value 'zf2' see value "invoice". there list of hyperlinks on top of page .home, .about , .contact. click item navigate page. navigate again home page clicking home hyperlink , need see previous data entered , got.how that? in advance.
i'd suggest use service, act sharable resource between different controllers.
you need changes in code.
- you need move static either service or angular constant.
- use dot rule while binding object udpate binding automatically.
- assign different controller each view, more modular approach.
service
scotchapp.service('dataservice', function() { this.data = {} this.data.billingmap = new array(); this.data.billingmap["zf2"] = "invoice"; this.data.billingmap["zre"] = "credit returns"; this.data.billingmap["zg2"] = "credit memo"; this.data.billingmap["zl2"] = "debit memo"; this.data.billingmap["zs2"] = "cancellation of credit memo"; this.data.billingmap["zs1"] = "cancel. invoice (s1)"; this.data.selectedbillmap = ''; }); controller
scotchapp.controller('maincontroller', function($scope, dataservice) { $scope.message = 'everyone come , see how look!'; $scope.billingdata = dataservice.data.billingmap; });
Comments
Post a Comment