AngularJS: Создание объектов из входов

Question

Вот мой сценарий

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

<form class="panels" id="form1"> 
    <input name="invoice_no" class="input-container"> 
    <input name="description" class="input-container"> 
    <input name="amount" class="input-container"> 
</form> 

<form class="panels" id="form2"> 
    <input name="invoice_no" class="input-container"> 
    <input name="description" class="input-container"> 
    <input name="amount" class="input-container"> 
</form> 

<form class="panels" id="form3"> 
    <input name="invoice_no" class="input-container"> 
    <input name="description" class="input-container"> 
    <input name="amount" class="input-container"> 
</form> 

<form id="summary"> 
<input name="totalCost"> 
<input name="date"> 
</form> 

То, что я хочу сделать, это сохранить эти значения в массиве объектов, как это:

[ 
    {"invoice_no":123456, "description":"some description","amount":2456}, 
    {"invoice_no":124578, "description":"abcd deasda ask","amount":1258}, 
    {"invoice_no":124585, "description":"another description","amount":3698} 
] 

Я хочу связать свой яваскрипт функцию к событию нг смены каждому inputboxes для хранения ценности.

, но вместо этого я получаю объекты массива, содержащие то, что я набираю в первом текстовом поле. как этот:

массив зависит от того, сколько форм были созданы, так что если у меня есть 4 формы мне нужно иметь объекты 4 JSon в моем массиве.

ниже мой код Javascript до сих пор

Контроллер:

$scope.saveData = function(){ 
    var element = event.target; 
    var object = angular.element(element).closest('.panels').attr('id'); 
    var value = angular.element(element).closest('.panels').find('.input-container').val(); 
    var key = angular.element(element).closest('.panels').find('.input-container').attr('name'); 

    object = {}; 
    object [key] = value;  

    arrayOFProducts.push(object); 
    console.log(arrayOFProducts); 

} 

Answer 1

$scope.forms = []; 
 

 
var form1 = {invoice_no : '',description : '', amount : '' }; 
 

 
$scope.forms.push(form1);

<form class="panels" id="form1" ng-repeat="f in forms"> 
 
    <input name="invoice_no" ng-model="f.invoice_no" class="input-container"> 
 
    <input name="description" ng-model="f.description" class="input-container"> 
 
    <input name="amount" ng-model="f.amount" class="input-container"> 
 
</form>

Аналогично,

щелкать add вам нужно только нажать новый объект, например form1 - $ scope.forms, и на экране будет создано 1 новая форма.

console.log($scope.forms);

даст вам

`[ 
    {"invoice_no":123456, "description":"some description","amount":2456}, 
    {"invoice_no":124578, "description":"abcd deasda ask","amount":1258}, 
    {"invoice_no":124585, "description":"another description","amount":3698} 
]`