AngularJS和JQuery $ .each（）函数只返回最后一个循环值

I've been working with AngularJS and integrated JQuery library in my project.

我一直在使用AngularJS并在我的项目中集成了JQuery库。

I am using JQuery's $.each() function to loop through my class. I want to create an array of objects out of it just like the format below:

我正在使用JQuery的$ .each()函数来遍历我的类。我想从中创建一个对象数组,就像下面的格式一样:

[
    {"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 Controller

$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);

}

The main problem here is that I get the same values for all the json objects inside the array. It seems that only the last input values are being created as an object and the it pushes it to the array 5 times..

这里的主要问题是我为数组中的所有json对象获取相同的值。似乎只有最后一个输入值被创建为一个对象,并且它将它推送到数组5次。

1 个解决方案

#1

The issue is because you need to reset the object you append back to an empty state after each iteration of the outer loop. Try this:

问题是因为您需要在外循环的每次迭代后重置您追加到空状态的对象。试试这个:

$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);
}