Question

我有2个ui-grid使用2个不同的控制器显示数据，每个控制器调用不同的服务。（服务使用ngresource而不是http。）我的需求是：当在第一个网格（供应商）中选择一行时，第二个网格（合同）应仅获取数据，其中值与第一个网格中获取的ID相匹配。所以基本上当触发第一个网格供应商$ scope.gridApi.selection.on.rowSelectionChanged事件时，应该使用所选行的VEID值触发contracts.query。我是角度新手，所以无法准确找出传递值的位置以及在功能中添加的位置。我在$ emit和$ on上看过这篇文章，但不清楚。我的服务也使用$ ngresource和QUERY方法，而大多数例子都使用$ http或POST方法。请帮忙！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我得到了这个工作。我必须在同一个控制器中安装两个网格并解决问题。

这是因为$ scope.GridApi在控制器之间不可用。 U可能能够使用Controller AS在不同的控制器中实现网格交互，但是现在，这符合我的目的。以下是工作控制器代码：

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

    };

}
})();

如何在angular ui-grid中传递选定的行项以获取另一个ui-grid的数据

1 个答案: