Hàm AngularJS và JQuery $ .each() chỉ trả về giá trị vòng lặp cuối cùng

Question

Tôi đã làm việc với AngularJS và thư viện JQuery tích hợp trong dự án của tôi.

Tôi đang sử dụng chức năng $.each() của JQuery để lặp qua lớp học của tôi. Tôi muốn tạo ra một mảng của các đối tượng ra khỏi nó giống như định dạng dưới đây:

[ 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
    {"invoice_no":"value1", "brand":"value2", "model":"value3"}, 
] 

HTML

<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 
<div class="panels"> 
    <input class="form-control" name="invoice_no"> 
    <input class="form-control" name="brand"> 
    <input class="form-control" name="model"> 
</div> 

JS khiển

$scope.saveData = function(){ 
    var arrayOFProducts = []; 
    var object = {}; 

    angular.element('.panels').each(function(){ 
      $(this).find('.form-control').each(function(){ 
       var key = $(this).attr('name'); 
       var value = $(this).val(); 
       object [key] = value; 
      }); 
      arrayOFProducts.push(object); 
    }); 

    console.log(arrayOFProducts); 

} 

Vấn đề chính ở đây là tôi nhận được cùng các giá trị cho tất cả các đối tượng json bên trong mảng. Dường như chỉ có các giá trị đầu vào cuối cùng được tạo ra như một đối tượng và nó đẩy nó vào mảng 5 lần ..

Answer 1

Vấn đề là vì bạn cần đặt lại đối tượng mà bạn thêm trở lại trạng thái rỗng sau mỗi lần lặp vòng lặp ngoài. Hãy thử điều này:

$scope.saveData = function() { 
    var arrayOFProducts = []; 

    angular.element('.panels').each(function() { 
     var obj = {}; // note this moved to here 

     $(this).find('.form-control').each(function() { 
      var key = $(this).attr('name'); 
      var value = this.value; 
      obj[key] = value; 
     }); 
     arrayOFProducts.push(object); 
    }); 

    console.log(arrayOFProducts); 
}