javascript - Push json data to existing array in angular js -
i'm having issues pushing data existing array. can see i'm posting data table, however, when user enters 8 digit barcode, push data table.
factory
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); } }; } ]); controller
angular.module('app.scanlistctrl', []).controller('scanlistctrl', ['$scope', 'pickupserv', function ($scope, pickupserv) { //get pick 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>
you adding new item, other element outside scope (inside factory), must doing this:
$scope.autoadditem = function () { if (($scope.barcodevalue + '').length == 8) { $scope.items.push({ "barcodeval": $scope.barcodevalue, "couriertype": "pickup", "username": "aspuser" }); $scope.barcodevalue = ""; } }; if want make inside factory must (and ignore change above):
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 $scope items in factory , angular //link object items $scope.items (code not tested 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); } }; } ]);
Comments
Post a Comment