Javascript 如何以角度将对象从窗体推送到数组_Javascript_Angularjs_Scope

Javascript 如何以角度将对象从窗体推送到数组

javascript angularjs

Javascript 如何以角度将对象从窗体推送到数组,javascript,angularjs,scope,Javascript,Angularjs,Scope,我正在尝试在AngularJS中添加联系人。我是Angular的新手，我想知道我是否已经正确格式化了要添加的联系人 <div class="row"> <form ng-submit="addContact(firstName,email,phone)"> <div class="col-md-3"> <label for="name">Name:</label> <input type="te

我正在尝试在AngularJS中添加联系人。我是Angular的新手，我想知道我是否已经正确格式化了要添加的联系人

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

使用正确的键名调用函数。您的输入绑定到contact.firstName、contact.email、contact.phone

   <form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">

我认为你应该做两个改变。第一个是

ng submit

<form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">

您需要分配键以及传递给函数的值：

$scope.addContact = function(firstName,email,phone){
    $scope.contacts.push({firstName:firstName,email:email,phone:phone});
};

以及修改您的ng提交：

<form ng-submit="addContact(contact.firstName,contact.email,contact.phone)">

在这种情况下，您不需要将参数传递给函数，因为字段已经双向绑定到控制器。替代解决方案：

$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 = '';
};

然后，表单的开始标记应更改为

<form ng-submit="addContact()">

您需要将表单放入ng repeat中。这会将您正在编辑的联系人与所有其他联系人隔离，并将其保留在一个数组中。可能会将addcontact函数绑定到ng click上的一个按钮上，但是要去掉函数参数，因为它们没有被使用

这是一个工作模板。请注意，ng repeat中使用的“track by$index”用于添加可能的重复项

var-app=angular.module（'contactApp'，[]）；
应用控制器（'contactController'，功能（$scope）{
$scope.a联系人={
名字：“乔”，
电子邮件：“joe@gmail.com",
电话：“453-367-9383”
};
$scope.contacts=[]；
$scope.addContact=函数（名字、电子邮件、电话）{
$scope.contacts.push（$scope.aContact）；
$scope.aContact={}；//添加到联系人列表后清除联系人
};
});

姓名：
电邮：
电话：
名字
电子邮件
电话
{{contact.firstName}
{{contact.email}
{{contact.phone}
这是工作代码
<!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>


姓名：
电邮：
电话：
{{contact.firstName}
{{contact.email}
{{contact.phone}
var-app=angular.module（'contactApp'，[]）；
应用控制器（'contactController'，功能（$scope）{
$scope.contacts={firstName:“Joe”，电子邮件：joe@gmail.com，电话：“453-367-9383”}；
log（$scope.contact）；
$scope.contactsArray=[]；
$scope.addContact=功能（联系人）{
控制台日志（联系人）；
//执行您想要的任何代码。。。。
//$scope.contacts.push（{firstName:''，电子邮件：''，电话：'}）；
$scope.contactsArray.push（contact）；//将对象推到此处
$scope.contacts={}；//用于提交后为空
};
});


为什么在addContact函数中推空值？
$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 = '';
};

<form ng-submit="addContact()">

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