推送覆盖以前的 ui-grid rowdata

Question

使用 angular 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();
}]);

如有任何帮助，我们将不胜感激。

请看fiddle演示： JSFIDDLE 我正在将数组写入控制台。

更新

我通过这样做让它工作：

$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.ProductViewModel.Products 和 $scope.gridOptions.data 没有引用同一个数组。

请看固定的fiddle:

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

fiddle

Answer 2

我通过创建一个新对象并在每次单击时将键和值循环到新对象中来修复它。

$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

推送覆盖以前的 ui-grid rowdata

push overwriting previous ui-grid rowdata

javascript

angularjs

arrays

angular-ui-grid

ui-grid