2つの関連する角度uiグリッドの例

Question

私は数日間の研究の後、2つのuiグリッドをリンクする方法の問題を積み重ねています。 1ページに2つのグリッドが必要です。 1番目のグリッド上の選択された項目に基づいて、2番目のグリッドは直ちにリンクされた列でデータをフィルタリングします。ここ

はindex.htmlを

<div class="col-md-3 block" ng-controller="MainCtrl"> 
    <div ui-grid="gridTypesOptions" ui-grid-selection class="typegrid"></div> 
</div> 
<div class="col-md-3 block" ng-controller="MainCtrl"> 
    <div ui-grid="gridMainOptions" ui-grid-edit ui-grid-row-edit class="grid"></div> 
    <br> 
    <strong>Data Length:</strong> {{ gridMainOptions.data.length | number }} 
    <br> 
    <strong>Last Cell Edited:</strong> {{msg.lastCellEdited}} 
    <br> 
</div> 

次のブロックは、これが機能するかの任意のアイデア

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.selection']); 
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) { 
    $scope.selectedType = []; 
    $scope.gridTypesOptions = { 
     columnDefs: [{ name: 'journal_name', enableCellEdit: false, displayName: 'Journal Name', width: '100%' }], 
     selectedItems: $scope.selectedType, 
     multiSelect: false, 
     enableRowSelection: true, 
     enableRowHeaderSelection: false, 
     modifierKeysToMultiSelect: false, 
     noUnselect: false, 
     onRegisterApi: function (gridApi) { 
      $scope.gridApi = gridApi; 

      gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
       var filterData = row.entity.journal_name; 
       console.log(filterData); 
       $scope.selectedType = [{ filterData }]; 

       gridApi.grid.refresh(); 
      }); 
     } 
    } 

    $http.get('/home/types') 
     .success(function (data) { 
      $scope.gridTypesOptions.data = data; 
    }); 

    $scope.gridMainOptions = { 
     useExternalFiltering: true, 
     enableFiltering: true, 
     columnDefs: [ 
     { name: 'journal_id', displayName: 'Id', type: 'number', enableCellEdit: false, width: '10%' }, 
     { 
      name: 'journal_name', displayName: 'Type', editableCellTemplate: 'ui-grid/dropdownEditor', width: '10%', 
      cellFilter: 'mapType', editDropdownValueLabel: 'journal_name', editDropdownRowEntityOptionsArrayPath: 'typeOptions' 
      //filter: {term: $scope.selectedType.toString()} 
     }, 
     { name: 'journal_name_20', displayName: 'Name (20 chars)', width: '20%' }, 
     { name: 'journal_name_max', displayName: 'Name (max chars)', width: '24%' }, 
     { name: 'journal_qty', displayName: 'Qty', type: 'number', width: '8%' }, 
     { name: 'journal_price', displayName: 'Price', cellFilter: 'currency', width: '8%' }, 
     { name: 'journal_date', displayName: 'Date', type: 'date', enableCellEdit: false, cellFilter: 'date:"dd.MM.yy"', width: '20%' } 
     ], 

    }; 

    $scope.msg = {}; 
    $scope.gridMainOptions.onRegisterApi = function (gridApi) { 
     $scope.gridApi = gridApi; 

     gridApi.rowEdit.on.saveRow($scope, function(rowEntity){ 
       var promise = $scope.SaveRowData(rowEntity); 
       $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise); 
       $scope.gridApi.grid.queueGridRefresh(); 
     }); 

     gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) { 
      $scope.msg.lastCellEdited = 'Edited row id:' + rowEntity.journal_id + ' Column:' + colDef.displayName + ' newValue:' + newValue + ' oldValue:' + oldValue; 
      $scope.$apply(); 
     }); 

     gridApi.core.on.filterChanged($scope, function() { 
      var grid = this.grid; 

      angular.forEach(grid.columns, function (value, key) { 
       if (value.filters[0].term) { 
        console.log('FILTER TERM FOR ' + value.colDef.name + ' = ' + value.filters[0].term); 
       } 
      }); 

      this.grid.refresh(); 
     }); 

     gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
    }; 

    $http.get('/home/data') 
     .success(function (data) { 
      for (i = 0; i < data.length; i++) { 
       data[i].journal_date = new Date(data[i].journal_date); 
       data[i].journal_name = data[i].journal_type.journal_name; 
       data[i].typeOptions = $scope.gridTypesOptions.data; 
      } 
      $scope.gridMainOptions.data = data; 
     }); 


    $scope.filter = function() { 
     $scope.gridApi.grid.refresh(); 
    }; 

    $scope.singleFilter = function() { 
     console.log('Column value: ' + $scope.gridApi.grid.columns[1] + 'Selected type: ' + selectedType); 
     $scope.gridApi.grid.columns[1].filter.term = selectedType; 
    }; 

    $scope.SaveRowData = function (row) { 
     var rowdata = row; 
     return $.post("home/setdata", rowdata, function (data) { 
     }); 
    } 
}]) 

.filter('mapType', function() { 
    var typeHash = { 
     'system 1' : 'system 1', 
     'system 2': 'system 2', 
     'user 1': 'user 1', 
     'user 2': 'user 2', 
    }; 
    return function (input) { 
     if (!input) { 
      return ' - '; 
     } else { 
      return typeHash[input]; 
     } 
    }; 
}) 

.filter('currency', function() { 
    return function (value) { 
     return '$' + value 
      .toFixed(2) 
      .replace(/\d(?=(\d{3})+\.)/g, '$&,'); 
    } 
}) 
; 

main.jsですか？ここで

Answer 1

は実施例であるhttp://plnkr.co/edit/03BEDS1QAj2UVsvjPxUS?p=preview

JS：ここ
はgridApi第一グリッドを指し、gridApi1は、第二グリッドを指します。

gridApi.selection.on.rowSelectionChanged($scope,function(row){ 
    console.log(row.entity); 
    $scope.gridApi1.grid.columns[1].filters[0].term = row.entity.name; 
}); 

PS：コードを貼り付けるのではなく、plunkrリンクを投稿することは常に良いことです。