Javascript 将json数据推送到angular js中的现有数组

我在将数据推送到现有阵列时遇到问题。您可以看到我正在将数据发布到表中，但是，当用户输入8位条形码时，我喜欢将数据推送到表中

工厂

    angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {
        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(data).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [{
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    }],
            add: function(item) {
                this.items.push(item);
                console.log(item);
            }
        };
    }
]);

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {

        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(function(data){
                    $rootScope.items = data.d;
                    console.log(data.d);
                }).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [],
            add: function(item) {
                $rootScope.items.push(item);
                console.log(item);
            }
        };
    }
]);

控制器

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {
            //$scope.items = pickUpServ.items;

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

HTML

<div ng-controller="ScanListCtrl">
<div class="row prepend-top-md">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-barcode"></i>&nbspScan Item</h3>
            </div>
            <div class="panel-body">
                <div class="input-group input-group-lg">
                    <input type="number" class="form-control" placeholder="Scan Item" ng-model="BarcodeValue"
                        ng-change="autoAddItem()" is-focus>
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button" ng-click="addRow()">
                            Add Barcode</button>
                    </span></div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 3%">
                            #
                        </th>
                        <th>
                            <i class="fa fa-barcode"></i>&nbspBarcode
                        </th>
                        <th>
                            <i class="fa fa-medkit"></i>&nbspCSN
                        </th>
                        <th>
                            <i class="fa fa-user"></i>&nbspUser
                        </th>
                        <th>
                            <i class="fa fa-clock-o"></i>&nbspDate
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:'Id':true:reverse">
                        <td class="text-center">
                            [{{item.Id}}]
                        </td>
                        <td>
                            {{item.BarcodeValue}}
                        </td>
                        <td>
                            {{item.CSN}}
                        </td>
                        <td>
                            {{item.LastName + ', ' + item.FirstName}}
                        </td>
                        <td>
                            {{item.Created}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

 Scan项目
添加条形码
#
&条形码
 CSN
 User
 Date
[{{item.Id}}]
{{item.BarcodeValue}}
{{item.CSN}
{{item.LastName+'，'+item.FirstName}
{{item.Created}

---

要将新项目添加到范围外（工厂内）的其他元素，必须执行以下操作：

        $scope.autoAddItem = function () {
            if (($scope.BarcodeValue + '').length == 8) {
                $scope.items.push({
                    "barcodeVal": $scope.BarcodeValue,
                    "courierType": "PICKUP",
                    "userName": "aspuser"
                });

                $scope.BarcodeValue = "";
            }
        };

如果您想在工厂内制造所有产品，必须是这样的（忽略上面的更改）：

---

我想出来了。。。我使用了

$rootScope.items=data.d以解决我的问题。谢谢大家对我的帮助

工厂

    angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {
        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(data).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [{
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    }],
            add: function(item) {
                this.items.push(item);
                console.log(item);
            }
        };
    }
]);

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
    function($rootScope, $http) {

        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeList',
                    data: {
                        "bardcodeVal": "",
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    },
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(function(data){
                    $rootScope.items = data.d;
                    console.log(data.d);
                }).error(function(error) {
                    console.log('Error - getPickUpList');
                });
            },
            items: [],
            add: function(item) {
                $rootScope.items.push(item);
                console.log(item);
            }
        };
    }
]);

控制器

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ',
    function ($scope, pickUpServ) {
        //Get Pick Up Data
        if ($scope.title == 'Pick Up') {
            //$scope.items = pickUpServ.items;

            pickUpServ.getPickUpList(function (data) {
                $scope.items = data.d
            });

            $scope.autoAddItem = function () {
                if (($scope.BarcodeValue + '').length == 8) {
                    pickUpServ.add({
                        "barcodeVal": $scope.BarcodeValue,
                        "courierType": "PICKUP",
                        "userName": "aspuser"
                    });
                    $scope.BarcodeValue = "";
                }
            };
        }
    }
]);

在控制器中，您将两次分配给
$scope.items
。您对
pickUpServ.items
的原始引用将替换为POST请求返回的新项目数组。这是有意的吗？谢谢。我看得出来。这是个小错误。但我仍然需要将数据推送到表中。我建议您在服务/工厂中执行所有数组操作。这样，您只需调用pickUpServ.add（），然后在路由的resolve方法中使用pickUpServ.get（）。@CorySilva-谢谢您的建议。我喜欢尝试使用控制器中的add（）。我在数据（_this.items）中遇到一个“TypeError:object not a function”错误。您能提供另一个解决方案吗？修复了传递回调方法的错误。（该函数已被重写）仍然不起作用？不管怎样，我想出来了。。。我使用了$rootScope global varIs-wird，我有一个angular服务向聊天应用程序发送的完全相同的代码，并将消息保存在一个服务对象中，这个范围工作得很好。唯一不同的是，我的服务有一个对象的getter，类似于getItems:function（）{return this.items}；在你的项目中是幸运的。你是否使用任何数据库系统来存储数据？