How to push an object from a form to an array in Angular
Question
I am attempting to add a contact in AngularJS. I am new to Angular and would like to know if I have formatted this correctly for the contact to be added.
<div class="row">
<form ng-submit="addContact(firstName,email,phone)">
<div class="col-md-3">
<label for="name">Name:</label>
<input type="text" name="name" ng-model="contact.firstName">
</div>
<div class="col-md-3">
<label for="email">Email:</label>
<input type="text" name="email" ng-model="contact.email">
</div>
<div class="col-md-3">
<label for="name">Phone:</label>
<input type="phone" name="phone" ng-model="contact.phone">
</div>
<div class="col-md-3">
<input type="submit" value="Add Contact">
</div>
</form>
</div>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.firstName}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
</tr>
</tbody>
In my app.js
(function(){
var app = angular.module('contactApp', []);
app.controller('contactController', function($scope){
$scope.contacts = [{firstName:"Joe",email:"joe@gmail.com",phone:"453-367-9383"}];
$scope.addContact = function(firstName,email,phone){
$scope.contacts.push({firstName:'',email:'',phone:''});
};
});
}());
7 answers
solution1
0 2015-11-15 17:21:07
Use correct key names to call the function. Your inputs are bound to contact.firstName,contact.email,contact.phone.
<form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">
Also push the parameters you recieved in you function
$scope.addContact = function(firstName,email,phone){
$scope.contacts.push({firstName:firstName,email:email,phone:phone});
};
solution2
0 2015-11-15 17:23:43
I think you should make two changes. First one is in ng-submit like
<form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">
second one is in your addContact method that should look something like
$scope.addContact = function(firstName,email,phone){
$scope.contacts.push({firstName:firstName,email:email,phone:phone});
solution3
0 2015-11-15 17:24:17
You need to assign the keys, the values you are passing to the function:
$scope.addContact = function(firstName,email,phone){
$scope.contacts.push({firstName:firstName,email:email,phone:phone});
};
As well as modify your ng-submit:
<form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">
solution4
0 2015-11-15 17:24:24
You don't need to pass the parameters to the function in this case because the fields are already 2-way binded to your controller. Alternative solution:
$scope.addContact = function(){
$scope.contacts.push({
firstName: $scope.contact.firstName,
email: $scope.contact.email,
phone: $scope.contact.phone
});
$scope.contact.firstName = '';
$scope.contact.email = '';
$scope.contact.phone = '';
};
Then, Your form's opening tag should be changed to
<form ng-submit="addContact()">
solution5
0 2015-11-15 17:27:34
You need to put the form inside ng-repeat. This will isolate the contact you're editing from all the other contacts and keep them in an array. Maybe tie the addcontact function to a button on ng-click, but get rid of the function arguments since they aren't used.
solution6
0 ACCPTED 2015-11-15 17:28:57
Here is a working template. Note that, "track by $index" used in ng-repeat for add possible duplicates.
var app = angular.module('contactApp', []); app.controller('contactController', function($scope) { $scope.aContact = { firstName: "Joe", email: "joe@gmail.com", phone: "453-367-9383" }; $scope.contacts = []; $scope.addContact = function(firstName, email, phone) { $scope.contacts.push($scope.aContact); $scope.aContact = {}; //clear contact after added to contact list }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="contactApp" ng-controller="contactController"> <div class="row"> <form ng-submit="addContact()"> <div class="col-md-3"> <label for="name">Name:</label> <input type="text" name="name" ng-model="aContact.firstName"> </div> <div class="col-md-3"> <label for="email">Email:</label> <input type="text" name="email" ng-model="aContact.email"> </div> <div class="col-md-3"> <label for="name">Phone:</label> <input type="phone" name="phone" ng-model="aContact.phone"> </div> <div class="col-md-3"> <input type="submit" value="Add Contact"> </div> </form> </div> <table> <th> <tr> <th>First name</th> <th>Email</th> <th>Phone</th> </tr> <tr ng-repeat="contact in contacts track by $index"> <td>{{contact.firstName}}</td> <td>{{contact.email}}</td> <td>{{contact.phone}}</td> </tr> </table> </body>
solution7
0 2015-11-15 17:56:14
this is working code..
<!DOCTYPE html>
<html ng-app="contactApp">
<head>
</head>
<body ng-controller="contactController">
<form ng-submit="addContact(contacts)">
<div class="col-md-3">
<label for="name">Name:</label>
<input type="text" name="name" ng-model="contacts.firstName"></div>
<div class="col-md-3">
<label for="email">Email:</label>
<input type="text" name="email" ng-model="contacts.email"></div>
<div class="col-md-3">
<label for="name">Phone:</label>
<input type="phone" name="phone" ng-model="contacts.phone"></div>
<div class="col-md-3"><input type="submit" value="Add Contact"></div>
</form>
</div>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.firstName}}</td>
<td>{{contact.email}}</td>
<td>{{contact.phone}}</td>
</tr>
</tbody>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script>
var app = angular.module('contactApp', []);
app.controller('contactController', function($scope){
$scope.contacts = {firstName:"Joe",email:"joe@gmail.com",phone:"453-367-9383"};
console.log($scope.contact);
$scope.contactsArray = [];
$scope.addContact = function(contact){
console.log(contact);
//do whatever code you want....
// $scope.contacts.push({firstName:'',email:'',phone:''});
$scope.contactsArray.push(contact);//pushing your object here
$scope.contacts = {};// for empty after submit
};
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.