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; };
Comments
Post a Comment