如何在有角度的ui网格中传递选定的行项目以获取另一个ui网格的数据

Question

I have 2 ui-grids displaying data using 2 different controllers, each controller calling a different service. 我有2个ui网格，它们使用2个不同的控制器显示数据，每个控制器调用一个不同的服务。 (service uses ngresource and not http.) My need is : when one row is selected in 1st grid(vendors), the 2nd grid(contracts) should get data only where the value matches the id that was fetched in the first grid. （服务使用ngresource，而不使用http。）我的需求是：在第一个网格（供应商）中选择一行时，第二个网格（合同）应仅在值与在第一个网格中获取的ID匹配的情况下获取数据。 So basically when the 1st grid vendors $scope.gridApi.selection.on.rowSelectionChanged event is triggered the contracts.query should get triggered with the VEID value of the row selected. 因此，基本上，当第一个网格供应商$ scope.gridApi.selection.on.rowSelectionChanged事件被触发时，Contracts.query应该使用选定行的VEID值来触发。 I am new to angular, so not able to figure out exactly where to pass the values and where to add in function to achieve this. 我是angular的新手，因此无法确切确定在哪里传递值以及在何处添加函数来实现此目的。 I saw the article on $emit and $on, but not clear on it. 我看到有关$ emit和$ on的文章，但不清楚。 Also my service uses $ngresource and QUERY method , while most examples are using $http or POST method. 我的服务也使用$ ngresource和QUERY方法，而大多数示例都使用$ http或POST方法。 Please help! 请帮忙！

 //app.js (function () { 'use strict'; angular.module('VendorApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection','ang_venservice','ang_contservice','ui.grid.pinning']); })(); //vendor controller (function () { 'use strict'; angular .module('VendorApp') .controller('ang_vencontroller', ang_vencontroller); ang_vencontroller.$inject = ['$scope', 'vendors','contracts','$timeout', 'uiGridConstants']; function ang_vencontroller($scope, $rootscope,vendors, $timeout, uiGridConstants) { $scope.vendorsvalues = vendors.query() $scope.gridOptions = { enableRowHeaderSelection: false, multiSelect: false, enableRowSelection: true, enableSelectAll: true, enableSorting: true, enableFiltering: true, enablePagination: true, enablePaginationControls: true, paginationCurrentPage: 1, paginationPageSize: 100, maxVisibleColumnCount: 200, columnDefs: [ { name: 'VENDORID', field: 'MVE_VEID' }, { name: 'NAME', field: 'VE_NAME' }, { name: 'ADDR1', field: 'VE_ADDR1' } ], data: $scope.vendorsvalues }; $scope.gridOptions.onRegisterApi = function (gridApi) { $scope.gridApi = gridApi; $timeout(function () { $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) { $scope.value = row.entity.MVE_VEID; $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); //$scope.contractvalues =function(){$rootScope.$emit( contracts.query({ id: $scope.value }))}; }); //contract controller (function () { 'use strict'; angular .module('VendorApp') .controller('ang_contcontroller', ang_contcontroller); ang_contcontroller.$inject = ['$scope', 'contracts']; function ang_contcontroller($scope, $rootscope,contracts) { $scope.contractvalues = contracts.query({ id: $scope.value }); $scope.gridoptions2 = { enableRowHeaderSelection: false, multiSelect: false, enableRowSelection: true, enableSelectAll: true, enableSorting: true, enableFiltering: true, enablePagination: true, enablePaginationControls: true, paginationCurrentPage: 1, paginationPageSize: 100, maxVisibleColumnCount: 200, columnDefs: [ { name: 'CONTRACTID', field: 'MCO_COID' }, { name: 'NAME', field: 'CO_DESC' }, { name: 'VENDORID', field: 'MCO_VEID' } ], data: $scope.contractvalues }; } })(); //contract service (function () { 'use strict'; var ang_contservice = angular.module('ang_contservice', ['ngResource']); ang_contservice.factory('contracts', ['$resource', function ($resource) { return $resource('/api/ContractsAPI/:id', { id: 0 }, { query: { method: 'GET', params: {}, isArray: true } }); }]) })();

 <body ng-cloak> <h4>VENDORS</h4> <div ng-controller="ang_vencontroller" > <div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div> <strong>SelectedRowCount:</strong> <span ng-bind="mySelectedRows.length"></span> <br /> <strong>SelectedVendor:</strong> <span ng-bind="value"></span> </div> <br> <br> <h4>CONTRACTS</h4> <div ng-controller="ang_contcontroller"> <div id="grid2" ui-grid="gridoptions2" ui-grid-pagination ui-grid-selection class="grid"></div> </div> </body> </html>

Answer 1

I got this working. 我得到了这个工作。 I had to have both the grids in the same controller and that fixed the issue. 我必须将两个网格都放在同一个控制器中，从而解决了该问题。

This is because the $scope.GridApi is not available between controllers. 这是因为$ scope.GridApi在控制器之间不可用。 U may be able to achieve grids to interact in different controllers using Controller AS , but for now, this serves my purpose. 您可能可以使用Controller AS实现网格以在不同的控制器中进行交互，但是目前，这符合我的目的。 Below is the working controller code: 以下是工作控制器代码：

(function () {
'use strict';

angular
    .module('VendorApp')
    .controller('ang_vencontroller', ang_vencontroller);
ang_vencontroller.$inject = ['$scope','$rootScope', 'vendors','contracts','$timeout', 'uiGridConstants'];


function ang_vencontroller($scope, $rootScope, vendors, contracts, $timeout, uiGridConstants) {
    $scope.value = 0;
    $scope.vendorsvalues = vendors.query();

    $scope.gridOptions = {
        enableRowHeaderSelection: false,
        multiSelect: false,
        enableRowSelection: true,
        enableSelectAll: true,
        enableSorting: true,
        enableFiltering: true,
        enablePagination: true,
        enablePaginationControls: true,
        paginationCurrentPage: 1,
        paginationPageSize: 100,
        maxVisibleColumnCount: 200,
        columnDefs: [
          { name: 'VENDORID', field: 'MVE_VEID' },
          { name: 'NAME', field: 'VE_NAME' },
          { name: 'ADDR1', field: 'VE_ADDR1' }
        ],
        data: $scope.vendorsvalues

    };

    $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.gridApi = gridApi;
            console.info("grid api 1 registered", $scope.gridApi);

            $timeout(function () {
                $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
                $scope.value = $scope.mySelectedRows[0].MVE_VEID;

                $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                $scope.value = row.entity.MVE_VEID;
                $scope.contractvalues = contracts.query({ id: $scope.value });
                console.log("scope.contractvalues:", $scope.contractvalues);
                $scope.gridoptions2.data = $scope.contractvalues;
                $scope.gridApi2.core.notifyDataChange(uiGridConstants.dataChange.ALL);
            });
        });
    };

    $scope.contractvalues = contracts.query({ id: $scope.value });
    $scope.gridoptions2 = {
        enableRowHeaderSelection: false,
        multiSelect: false,
        enableRowSelection: true,
        enableSelectAll: true,
        enableSorting: true,
        enableFiltering: true,
        enablePagination: true,
        enablePaginationControls: true,
        paginationCurrentPage: 1,
        paginationPageSize: 100,
        maxVisibleColumnCount: 200,
        columnDefs: [
          { name: 'CONTRACTID', field: 'MCO_COID' },
          { name: 'NAME', field: 'CO_DESC' },
          { name: 'VENDORID', field: 'MCO_VEID' }
        ],
        data: $scope.contractvalues,
        onRegisterApi: function (gridApi) {
            $scope.gridApi2 = gridApi;
        }

    };
    $scope.gridoptions2.onRegisterApi = function (gridApi) {
        $scope.gridApi2 = gridApi;
        console.info("***grid api 2 registered***", $scope.gridApi2);

    };

}
})();

如何在有角度的ui网格中传递选定的行项目以获取另一个ui网格的数据

问题描述

1 个解决方案

解决方案1
0 2016-03-09 17:25:07

如何在有角度的ui网格中传递选定的行项目以获取另一个ui网格的数据

问题描述

1 个解决方案

解决方案1 0 2016-03-09 17:25:07

解决方案1
0 2016-03-09 17:25:07