Как разместить данные динамической формы в angularjs?

Question

Я новичок в angularjs, мне нужно, чтобы http отправил данные динамической формы в API.

app.js

$scope.contacts = [ 
        { 'cpName':'', 
         'cpDesignation':'' , 
         'cpDept': '', 
         'cpEmail': '', 
         'cpMobile':'' 
        } 
        ]; 
$scope.addRow = function(){  
    $scope.contacts.push({ 'cpName':$scope.cpName, 'cpDesignation': $scope.cpDesignation, 'cpDept':$scope.cpDept, 'cpEmail':$scope.cpEmail, 'cpMobile':$scope.cpMobile}); 
    $scope.cpName=''; 
    $scope.cpDesignation=''; 
    $scope.cpDept=''; 
    $scope.cpEmail=''; 
    $scope.cpMobile='';  
}; 

форма контакта

<form name="myform" role="form" ng-submit="addRow()"> 

    <div class="row" ng-class="{true: 'error'}[submitted && myform.cpEmail.$invalid]"> 

     <div class="form-group"> 
      <label class="col-md-2 control-label">CONTACT PERSON</label> 
      <div class="col-md-4"> 
       <input type="text" class="form-control" name="cpName" 
        ng-model="cpName" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-2 control-label">DESIGNATION</label> 
      <div class="col-md-4"> 
       <input type="text" class="form-control" name="cpDesignation" 
        ng-model="cpDesignation" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-2 control-label">DEPARTMENT</label> 
      <div class="col-md-4"> 
       <input type="text" class="form-control" name="cpDept" 
        ng-model="cpDept" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-md-2 control-label">EMAIL*</label> 
      <div class="col-md-4"> 
       <input type="email" class="form-control" name="cpEmail" 
        ng-model="cpEmail" /> 
       <span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid"> 
        <span ng-show="myform.cpEmail.$error.required">Email is required.</span> 
        <span ng-show="myform.cpEmail.$error.email">Invalid email address.</span> 
       </span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-md-2 control-label">MOBILE</label> 
      <div class="col-md-4"> 
       <input type="number" class="form-control" name="cpMobile" 
        ng-model="cpMobile" /> 
      </div> 
     </div> 

     <div class="form-group">         
      <div style="padding-left:110px"> 
       <input type="submit" value="Add" class="btn btn-primary"/> 
      </div> 
     </div> 
    </div> 
    </form> 

    <table> 
     <tr> 
      <th>CONTACT PERSON</th> 
      <th>DESIGNATION</th> 
      <th>DEPARTMENT</th> 
      <th>EMAIL</th> 
      <th>Mobile</th>   
     </tr> 
     <tr ng-repeat="contact in contacts"> 
      <td>{{contact.cpName}} </td> 
      <td>{{contact.cpDesignation}} </td> 
      <td>{{contact.cpDept}} </td> 
      <td>{{contact.cpEmail}} </td> 
      <td>{{contact.cpMobile}} </td>  
     </tr> 
    </table> 

Я знаю, как обрабатывать одиночные данные формы, но не динамические данные .. Любая помощь будет оценена.

Спасибо

Answer 1

Определите форму, как этот

<div class="row" ng-repeat="contact in contacts"> 

    <div class="form-group"> 
     <label class="col-md-2 control-label">CONTACT PERSON</label> 
     <div class="col-md-4"> 
      <input type="text" class="form-control" name="cpName" 
       ng-model="contact.cpName" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-2 control-label">DESIGNATION</label> 
     <div class="col-md-4"> 
      <input type="text" class="form-control" name="cpDesignation" 
       ng-model="contact.cpDesignation" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-2 control-label">DEPARTMENT</label> 
     <div class="col-md-4"> 
      <input type="text" class="form-control" name="cpDept" 
       ng-model="contact.cpDept" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-2 control-label">EMAIL*</label> 
     <div class="col-md-4"> 
      <input type="email" class="form-control" name="cpEmail" 
       ng-model="contact.cpEmail" /> 
      <span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid"> 
       <span ng-show="myform.cpEmail.$error.required">Email is required.</span> 
       <span ng-show="myform.cpEmail.$error.email">Invalid email address.</span> 
      </span> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-2 control-label">MOBILE</label> 
     <div class="col-md-4"> 
      <input type="number" class="form-control" name="cpMobile" 
       ng-model="contact.cpMobile" /> 
     </div> 
    </div> 

    <div class="form-group">         
     <div style="padding-left:110px"> 
      <input type="submit" value="Add" class="btn btn-primary"/> 
     </div> 
    </div> 
</div> 

<input type="button" value="Add" class="btn btn-primary" ng-click="upload()"/> 
    <table> 
     <tr> 
      <th>CONTACT PERSON</th> 
      <th>DESIGNATION</th> 
      <th>DEPARTMENT</th> 
      <th>EMAIL</th> 
      <th>Mobile</th>   
     </tr> 
     <tr ng-repeat="contact in contacts"> 
      <td>{{contact.cpName}} </td> 
      <td>{{contact.cpDesignation}} </td> 
      <td>{{contact.cpDept}} </td> 
      <td>{{contact.cpEmail}} </td> 
      <td>{{contact.cpMobile}} </td>  
     </tr> 
    </table> 

Вот ваш код контроллера

$scope.contacts = [{}]; 
    $scope.upload = function(){ 
     //api call 
    } 
    $scope.addRow = function(){  
     $scope.contacts.push({}); 
    }; 

Answer 2

Использование ng-repeat по рядам .. Так, в открытии $scope.contacts имеет 1 строку и, следовательно, он будет показывать одну строку в HTML .. Теперь push новый объект $scope.contacts, а затем 2 ряда придет UI.

Итак, теперь, просто нажав пустой объект на $scope.contacts, вы можете получить любое количество строк.

Не беспокойтесь о данных, каждая строка будет содержать свои данные в массиве $scope.contacts .. и, наконец, просто отправить этот объект на сервер. Итак, теперь у вас есть динамические строки.