Menggunakan kisi ui sudut, saya telah menyertakan tombol di sebelah kiri setiap baris yang ketika diklik akan menambahkan baris ke troli, baris duplikat dapat ditambahkan ke troli jadi saya mendapatkan milidetik untuk membuat setiap baris unik, namun setiap klik troli saya tombol pada baris satu menimpa entri baris sebelumnya, saya telah mencoba menginisialisasi array baru tetapi itu juga tidak berfungsi.

Silakan lihat JSFIDDLE di bawah ini untuk demo yang berfungsi

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

Bantuan apa pun akan sangat dihargai.

Silakan lihat demo biola: JSFIDDLE Saya sedang menulis larik ke konsol.

PERBARUI

Saya membuatnya bekerja dengan melakukan ini:

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

Apakah ada cara yang lebih bersih (lebih dapat dipelihara)?

EDIT

Array terakhir di konsol (jika saya mengklik baris kubis 4 kali) akan terlihat seperti ini:

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

*Perhatikan ClientLineId yang unik

1
Devnsyde 15 Agustus 2017, 18:43

2 jawaban

Jawaban Terbaik

Saya memperbaikinya dengan membuat objek baru dan mengulang kunci dan nilai ke objek baru pada setiap klik.

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

Lihat FIDDLE TETAP

0
Devnsyde 16 Agustus 2017, 15:23

$scope.ProductViewModel.Products dan $scope.gridOptions.data Anda tidak merujuk ke larik yang sama.

Silakan lihat biola tetap:

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

biola

0
huan feng 16 Agustus 2017, 08:17