如何使用angularjs

时间:2015-12-14 09:30:17

标签: javascript html angularjs forms

可以帮助我使用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的页面。

1 个答案:

答案 0 :(得分:1)

使用服务是正确的方向。这就是你如何坚持并在控制器之间传递数据。

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

this.save = save;

this.list = list;

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

在我的代码“@ public functions”https://github.com/usrrname/shopapp/blob/master/app/site/services/products.srv.js

下查看此操作

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