推覆盖以前的网格rowdata

Question

使用角度ui网格我已经在每行的左侧包含一个按钮，点击时会将该行添加到购物车，重复的行可以添加到购物车，所以我得到毫秒每行都是唯一的，但是第一行中每次点击我的购物车按钮都会覆盖前一行的条目，我试图初始化一个新的数组，但是这也不起作用。

请参阅下面的jsfiddle的工作演示

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 to 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 with a cart icon on each row, when clicked, add the product to the 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(); 
}]); 

任何帮助将不胜感激。我想写数组到控制台。

UPDATE

我把它做这个工作：

$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)); 
}; 

是否有一个更清洁的（更好的可维护性）的方式？

编辑

在控制台的最后阵列（如果我点击白菜排4次）应该是这样的：

[{"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"}] 

*注意唯一ClientLineId的

Answer 1

我通过创建一个新的对象和循环键和值到每次点击新对象固定它。

$scope.AddToCart = function(rowData, event) { 
    rowData.IsSelected = true; 
    var newObj = {}; 
    $.each(Object.keys(rowData), function(i,v){ 
     if(v === "ClientLineId") 
     newObj[v] = new Date().getUTCMilliseconds(); 
     else if(v === "IsSelected") 
     newObj[v] = true; 
     else 
     newObj[v] = rowData[v]; 
    }); 
    $scope.ProductViewModel.Products.push(newObj); 
    console.log(JSON.stringify($scope.ProductViewModel.Products)); 
}; 

见FIXED FIDDLE

Answer 2

你$ scope.ProductViewModel.Products和$ scope.gridOptions.data不引用相同的数组。

请参阅固定小提琴：

$scope.init = function() { 
    $scope.ProductViewModel = productData; 
    $scope.ProductViewModel.Products = $filter('orderBy')($scope.ProductViewModel.Products, "ProductCode", false); 
    $scope.gridOptions.data = $scope.ProductViewModel.Products; 
}; 

fiddle