Question

我正在尝试根据从第一个ng-grid选择返回的JSON数组填充ng-grid。到目前为止，我可以将JSON数组显示在屏幕上，但是我无法深入到JSON数组中或者在第二个网格中显示任何内容。我附加了控制器代码，可以在http://plnkr.co/edit/nULoI4?p=info找到plnkr。

'use strict';

function ArticleDataCtrl($rootScope, $scope, articleDataService) {
  articleDataService
    .getArticles()
    .then(
      function(articles) {
        $rootScope.articles = articles;
        $scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
      });

  $scope.articleGrid = {
    data: 'articleGridItems',
    showGroupPanel: false,
    multiSelect: true,
    checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-click="getDeliveryLocations()" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
    showSelectionCheckbox: true,
    selectWithCheckboxOnly: true,
    enableColumnResize: true,
    selectedItems: [],
    columnDefs: [{
      field: 'soMerArticleNbr',
      displayName: 'Article'
    }, {
      field: 'soMerOrdQty',
      displayName: 'Qty'
    }, {
      field: 'soArtDeliveryCode',
      displayName: 'Delivery Code'
    }, {
      field: 'dsgnSysRecDesc',
      displayName: 'Description'
    }]
  };

//This is not being called on header template click
  $scope.getDeliveryLocations = function() {
    $scope.deliveryLocationData = $scope.commonDeliveryLocations;
  };

  $scope.selections = $scope.articleGrid.selectedItems;
  var jsonObject = JSON.stringify($scope.selections);
  //Thought a json problem occured here...was wrong
  $scope.test = jsonObject.deliveryLocations;


  $scope.deliveryGrid = {
    data: 'selections',
    showGroupPanel: false,
    multiSelect: false,
    columnDefs: [{
      displayName: 'Delivery Methods'
    }]
  };
}

myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
  'articleDataService', ArticleDataCtrl
]);

Answer 1

因此，我没有尝试使用angular的内置复选框，而是在ng-click上使用自己的自定义方法。以下是代码和说明功能的plunker http://plnkr.co/edit/nULoI4?p=info。

'use strict';

function ArticleDataCtrl($rootScope, $scope, articleDataService) {
  articleDataService
    .getArticles()
    .then(
      function(articles) {
        $rootScope.articles = articles;
        $scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
      });

  $scope.articleGrid = {
    data: 'articleGridItems',
    showGroupPanel: false,
    multiSelect: false,
    enableColumnResize: true,
    selectWithCheckboxOnly: true,
    columnDefs: [{
      /*
            headerCellTemplate: myHeaderCellTemplate,
            */
      cellTemplate: '<input id="checkSlave" name="articleCheckBox" ng-checked="master" type="checkbox" ng-click="getDeliveryLocation(row.entity)" />'

    }, {
      field: 'soMerArticleNbr',
      displayName: 'Article'
    }, {
      field: 'soMerOrdQty',
      displayName: 'Qty'
    }, {
      field: 'soMerUOIDesc',
      displayName: 'UOM'
    }, {
      field: 'soArtDeliveryCode',
      displayName: 'Delivery Code'
    }, {
      field: 'soMerShrtMerDesc',
      displayName: 'Description'
    }, {
      field: 'soMerDesc',
      displayName: 'Vendor'
    }]
  };

  $scope.getDeliveryLocation = function(deliveryLocation) {
    $scope.deliveryLocationData = deliveryLocation.deliveryLocation;
    for (var i = 0; i < $scope.deliveryLocationData.length; i++) {
      var locationId = $scope.deliveryLocationData[i].dlvryLocId;
      var locationDesc = $scope.deliveryLocationData[i].dlveryLocDesc;
      $scope.deliveryLocationData[i].dlvryLocId = locationId + locationDesc;
    }
    return $scope.deliveryLocationData;
  };

    return $scope.deliveryLocationData;
  };


  $scope.deliveryGrid = {
    data: 'deliveryLocationData',
    showGroupPanel: false,
    multiSelect: false,
    columnDefs: [{
      field: 'dlvryLocId',
      displayName: 'Delivery Methods'
    }]
  };

  $scope.customerGroup = {
    value: 'DIY'
  };
}

myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
  'articleDataService', ArticleDataCtrl
]);

通过另一个网格选择填充ng-grid

1 个答案: