javascript - push overwriting previous ui-grid rowdata -


using angular ui grid have included button left of every row when clicked add row cart, duplicate rows can added cart milliseconds make each row unique, each click of cart button on row 1 overwriting previous row entry, have tried initializing new array isn't working either.

please see jsfiddle below working demo

js:

var myapp = angular.module('myapp', ['ui.grid']);  myapp.controller('myctrl', ['$scope', '$filter', function($scope, $filter) {  var productdata = {     "products": [{         "taglevel1": null,         "productname": "carrot",         "productcode": "car-001",         "isselected": null,         "clientlineid": null,         "active": true     }, {         "taglevel1": null,         "productname": "cucumber",         "productcode": "cuc-001",         "isselected": null,         "clientlineid": null,         "active": true     }, {         "taglevel1": null,         "productname": "cabbage",         "productcode": "cab-001",         "isselected": null,         "clientlineid": null,         "active": true     }, {         "taglevel1": null,         "productname": "lettuce",         "productcode": "let-001",         "isselected": null,         "clientlineid": null,         "active": true     }] };  var actiontemplate = '<div style="text-align:center;vertical-align:middle;line-height:35px;"><button id="{{row.entity.productid + \'_addtocartbtn\'}}" title="add cart" ng-class="(row.entity.isselected == true ? \'iconbtnclicked iconbtnclick fa fa-cart-plus fa-2x\':\'iconbtn iconbtnclick fa fa-shopping-cart fa-2x\')" ng-click="grid.appscope.addtocart(row.entity, $event)" /></div>';    $scope.gridoptions = {         rowheight: 35,     showgridfooter: false,         enablefiltering: false,         enablecolumnmenus: false,         columndefs: [             { field: 'isselected', name: 'isselected', width: '85', displayname: 'action', enablesorting: false, enablefiltering:false, celltemplate: actiontemplate },             { field: 'productcode', name: 'productcode', width: '200', displayname: 'product code'  },       { field: 'productname', name: 'productname', width: '800', displayname: 'product name' },         ],     onregisterapi: function(gridapi) {             $scope.gridapi = gridapi;         }     };    $scope.init = function() {     $scope.productviewmodel = productdata;     $scope.gridoptions.data = $filter('orderby')($scope.productviewmodel.products, "productcode", false);     $scope.productviewmodel.products = [];   };      //button on gui represented cart icon on each row, when clicked, add product cart     $scope.addtocart = function(rowdata, event) {         rowdata.isselected = true         rowdata.clientlineid = new date().getutcmilliseconds();         console.log('clientidused:' + rowdata.clientlineid);          $scope.productviewmodel.products.push(rowdata);         console.log('pvm.products: ' + json.stringify($scope.productviewmodel.products));     };    $scope.init(); }]); 

any appreciated.

please see fiddle demo: jsfiddle writing array console.

update

i got work doing this:

$scope.addtocart = function(rowdata, event) {     $scope.productviewmodel.products.push({"taglevel1":null,"productname":rowdata.productname, "productcode":rowdata.productcode, "isselected": true, "clientlineid": new date().getutcmilliseconds(), "active":rowdata.active, "$$hashkey":rowdata.$$hashkey });     console.log('pvm.products: ' + json.stringify($scope.productviewmodel.products)); }; 

is there cleaner (more maintainable) way?

edit

the final array in console (if click cabbage row 4 times) should this:

[{"taglevel1":null,"productname":"cabbage","productcode":"cab-001","isselected":true,"clientlineid":142,"active":true,"$$hashkey":"uigrid-0007"},{"taglevel1":null,"productname":"cabbage","productcode":"cab-001","isselected":true,"clientlineid":285,"active":true,"$$hashkey":"uigrid-0007"},{"taglevel1":null,"productname":"cabbage","productcode":"cab-001","isselected":true,"clientlineid":376,"active":true,"$$hashkey":"uigrid-0007"},{"taglevel1":null,"productname":"cabbage","productcode":"cab-001","isselected":true,"clientlineid":962,"active":true,"$$hashkey":"uigrid-0007"}] 

*notice unique clientlineid's

your $scope.productviewmodel.products , $scope.gridoptions.data not reference same array.

please see fixed fiddle:

$scope.init = function() {     $scope.productviewmodel = productdata;     $scope.productviewmodel.products = $filter('orderby')($scope.productviewmodel.products, "productcode", false);     $scope.gridoptions.data = $scope.productviewmodel.products; }; 

fiddle


Comments

Popular posts from this blog

PHP and MySQL WP -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

go - golang pprof for c library code -