How to send form data from one page to another page using angularjs

Question

Can any on help me to send the data from one page to another page using AngularJS.

Service code

var module = angular.module('app', []);
module.service('ContactService', function () {
var uid = 1;
var contacts = [{
    id: 0,
        'fname': 'Supriya',
        'mobile': '8985335701',
        'mail': '[email protected]',
        'age': '20',
        'gender' : 'female'
}];
this.save = function (contact) {
    if (contact.id == null) {
        contact.id = uid++;
        contacts.push(contact);
    } else {
        for (i in contacts) {
            if (contacts[i].id == contact.id) 
                {
                contacts[i] = contact;
            }
        }
    }
}
this.list = function () {
    return contacts;
}
});

Controller code:

 module.controller('ContactController', function ($scope, ContactService) {
$scope.contacts = ContactService.list();
$scope.saveContact = function () {
    ContactService.save($scope.newcontact);
    $scope.newcontact = {};
}
})

Html page:

 <body>
<div ng-app="app" ng-controller="ContactController">
<form>
<label>Full Name:</label>
<input type="text" ng-model="newcontact.fname"><br>
<label>Mobile Number:</label>
<input type="text" ng-model="newcontact.mobile"> </br>
<label> E-Mail:</label>
<input type="email" ng-model="newcontact.mail"> </br>
<label> Age:</label>
<input type="text" ng-model="newcontact.age"> </br>
<label> Gender: </label>
<input type="radio" ng-model="newcontact.gender" value="male">Male
<input type="radio" ng-model="newcontact.gender" value="female">Female
<input type="hidden" ng-model="newcontact.id" />
<br>
<input type="button" value="Save" ng-click="saveContact()" />
<table border=1px>
<thead> 
<tr>
<th>Full Name</th>
<th>Mobile Number</th>
<th>Email</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.fname }}</td>
<td>{{ contact.mobile }}</td>
<td>{{ contact.mail }}</td>
<td>{{ contact.age }}</td>
<td>{{ contact.gender }}</td>
</tr>
</tbody>
</table>    
</div>
</body>

On click of save button the details which are entered in the form should be send to another page called index.html.

@Supriya, Do you want to pass data between two html page or two partial pages with in a same main page? — Abhilash Augustine
– Abhilash Augustine, Commented Dec 14, 2015 at 10:11
@abhilash I want to pass data between 2 html pages not in the same mail page. — Supriya Rapelli
– Supriya Rapelli, Commented Dec 14, 2015 at 10:12
If you want to send form data across pages, use back-end code to help. If on a single page, angular service/factory is there for you. — Joy
– Joy, Commented Dec 14, 2015 at 10:16

usrrname · Accepted Answer · 2016-11-22 18:06:44Z

1

You're in the right direction by using a service. That's how you persist and pass data between controllers.

It seems like you need to bind out to make your function accessible to a controller. By binding out I mean, in your controller, you need to create a function that brings a service's functions in. Seems redundant but it's one of the most annoying things about Angular 1.X So try:

this.save = save;

and

this.list = list;

in your service codeblock, after you've defined the functions in your service, then they will be accessible to your controller.

See this in action in my code under "//public functions" https://github.com/usrrname/shopapp/blob/master/app/site/services/products.srv.js

Hope that helps. I'm so new to frameworks as well.

answered Nov 22, 2016 at 18:06

usrrname

3302 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to send form data from one page to another page using angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related