Question

我正在尝试添加到home.html中的列表，并使用ionic和angularjs在myOrders.html中显示列表。

问题在于，当我将新项目推送到数组时，先前的项目将替换为新项目。

示例：

推送一个＆＃39; - ＆GT;数组是[{＆＃39; name＆＃39;：one＆＃39;}]
     推送＆＃39;两个＆＃39; - ＆GT;数组是[{＆＃39; name＆＃39;：＆＃39; two＆＃39;}，{＆＃39; name＆＃39;：＆＃39; two＆＃39;}] //应该是   [{＆＃39;名称＆＃39;：＆＃39;一个＆＃39;}，{＆＃39;名称＆＃39;：＆＃39; 2＆＃39;}]

推三个＆＃39; - ＆GT;数组是[{＆＃39; name＆＃39;：＆＃39; three＆＃39;}，{＆＃39; name＆＃39;：＆＃39; three＆＃39;}，   {＆＃39; name＆＃39;：＆＃39; three＆＃39;}] //应该是   [{＆＃39;名称＆＃39;：＆＃39;一个＆＃39;}，{＆＃39;名称＆＃39;：＆＃39; 2＆＃39;}，{＆＃39;名称＆＃39; ：＆＃39; 3＆＃39;}]

我在下面添加了代码的相关部分。

home.html（添加到列表）

<ion-view title="Home">
    <ion-content ng-controller="homeCtrl">
        <form ng-submit="submitForm(product)" class="list">
            <input ng-model="product.name" type="text">
            <input type="submit" value="Search" class="button">
        </form>          
    </ion-content>
</ion-view>

myOrders.html（显示列表）

<ion-view title="My Orders">
    <ion-content ng-controller="myOrdersCtrl">
        {{ product }}
    </ion-content>
</ion-view>

controllers.js

angular.module('app.controllers', [])
...
.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(product);
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })

.controller('myOrdersCtrl', function($scope, formData) {
    $scope.product = formData.getForm();
})

services.js

angular.module('app.services', [])

.service('formData', [function(){
    return {
        form: [],
        getForm: function() {
            return this.form;
        },
        updateForm: function(item) {
            this.form.push(item);
        }
    }
}]);

Answer 1

您正在反复插入相同的对象到数组中。由于对象总是按引用传递，因此将同一对象的引用推送到数组中。更新对象时，存储在数组中的所有引用都会更改。

尝试创建对象的副本，同时传递给updateForm()

.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(angular.copy(product));
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })

Angularjs推送到服务中的数组替换以前的项

1 个答案: