将json数据推送到angular js中的现有数组
Posted
技术标签:
【中文标题】将json数据推送到angular js中的现有数组【英文标题】：Push json data to existing array in angular js 【发布时间】：2014-10-11 11:43:56 【问题描述】：我在将数据推送到现有数组时遇到问题。您可以看到我正在将数据发布到表格中，但是，当用户输入 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.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 = "";
;
]);
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> Scan 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> Barcode
</th>
<th>
<i class="fa fa-medkit"></i> CSN
</th>
<th>
<i class="fa fa-user"></i> User
</th>
<th>
<i class="fa fa-clock-o"></i> Date
</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>
【问题讨论】：
在您的控制器中，您分配给$scope.items 两次。您必须对 pickUpServ.items 的原始引用被替换为从 POST 请求返回的新项目数组。这是故意的吗？
谢谢。我理解了。这是一个小错误。但我仍然在将数据推送到表中。
我建议您在服务/工厂中执行所有数组操作。这样你只需调用 pickUpServ.add() 然后在路由的 resolve 方法中使用 pickUpServ.get()。
@CorySilva - 谢谢你的建议。我喜欢尝试使用控制器中的 add()。
【参考方案1】：
您正在将新项目添加到范围外（工厂内）的其他元素，必须执行以下操作：
$scope.autoAddItem = function ()
if (($scope.BarcodeValue + '').length == 8)
$scope.items.push(
"barcodeVal": $scope.BarcodeValue,
"courierType": "PICKUP",
"userName": "aspuser"
);
$scope.BarcodeValue = "";
;
如果你想 make all 里面的工厂必须是这样的（并忽略上面的更改）：
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function($rootScope, $http)
return
getPickUpList: function(callback)
var _this = this;
$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)
_this.items = data.d;
callback(_this.items) //This gonna set to $scope the items in factory and angular
//link the object items to $scope.items (Code not tested but must work)
)
.error(function(error)
console.log('Error - getPickUpList');
);
,
items: [
"bardcodeVal": "",
"courierType": "PICKUP",
"userName": "aspuser"
],
add: function(item)
this.items.push(item);
console.log(item);
;
]);
【讨论】：
我收到“TypeError: object is not a function”数据错误（_this.items） 您能提供其他解决方案吗？ 已修复，传递回调方法时出错。 （被函数覆盖） 还是不行？无论如何，我想通了...我使用了 $rootScope 全局变量 很奇怪，我通过角度服务将完全相同的代码用于聊天应用程序，并将消息保存在服务对象中，并且范围运行良好。唯一不同的是我的服务有一个对象的getter，比如getItems: function()return this.items;对不起，你的项目很幸运。【参考方案2】：想通了...我使用$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(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')
//$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 = "";
;
]);
【讨论】：
您是否使用任何数据库系统进行存储？以上是关于将json数据推送到angular js中的现有数组的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Json 数据推送到 UITableView 中的标签？