如何使用angularjs将表单数据从一个页面发送到另一个页面答案

【问题标题】：How to send form data from one page to another page using angularjs如何使用angularjs将表单数据从一个页面发送到另一个页面
【发布时间】：2016-03-19 17:23:57
【问题描述】：

任何人都可以帮助我使用 AngularJS 将数据从一个页面发送到另一个页面。

服务代码

var module = angular.module('app', []);
module.service('ContactService', function () {
var uid = 1;
var contacts = [{
    id: 0,
        'fname': 'Supriya',
        'mobile': '8985335701',
        'mail': 'hello@gmail.com',
        '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;
}
});

控制器代码：

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

HTML页面：

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

点击保存按钮后，表单中输入的详细信息应发送到另一个名为index.html的页面。

【问题讨论】：

查看此链接：stackoverflow.com/questions/20181323/…
你的意思是另一个标签或另一个控制器？
@Supriya，你想在两个 html 页面之间传递数据还是在同一个主页中的两个部分页面之间传递数据？
@abhilash 我想在不在同一个邮件页面的 2 个 html 页面之间传递数据。
如果你想跨页面发送表单数据，使用后端代码来帮助。如果在一个页面上，角度服务/工厂就在那里。

标签： javascript html angularjs forms

【解决方案1】：

通过使用服务，您的方向是正确的。这就是您在控制器之间持久化和传递数据的方式。

您似乎需要绑定才能使控制器可以访问您的函数。通过绑定我的意思是，在您的控制器中，您需要创建一个函数来引入服务的功能。似乎是多余的，但这是关于 Angular 1.X 最烦人的事情之一所以试试：

this.save = save;

和

this.list = list;

在您的服务代码块中，在您定义了服务中的功能之后，您的控制器将可以访问它们。

在“//公共函数”https://github.com/usrrname/shopapp/blob/master/app/site/services/products.srv.js下的代码中查看此操作

希望对您有所帮助。我对框架也很陌生。

【讨论】：