如何在使用角度ui-grid时单击单元格来定位自定义上下文菜单?

时间:2017-07-03 09:29:31

标签: javascript angularjs angular-ui-grid ui-grid

我正在使用{-3}}

的angular-ui-grid下面的代码

我的gridOptions如下:

$scope.gridOptions = {
            enableSelectAll: true,

            enableFiltering: true,
            showGridFooter: true,
            paginationPageSizes: [10, 25, 50, 75],
            paginationPageSize: 10,
            useExternalPagination: true,
            enableGridMenu: false,
            columnDefs: [
                { name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum', cellTemplate: "<div> <div ng-click='grid.appScope.cellClicked(row,col)' class='ui-grid-cell-contents' title='TOOLTIP'>{{COL_FIELD CUSTOM_FILTERS}}</div><div class='subMenu' ng-show='menu'><div class='subMenuChld'><span class='arrwLeft'></span><h5>View Details</h5><ul><li ng-click='menuItemClick(parts)'>New Price</li><li ng-click='menuItemClick(parts)'>Usage/Forecast</li><li ng-click='menuItemClick(parts)'>Inventory</li><li ng-click='menuItemClick(parts)'>Part BOM</li><li ng-click='menuItemClick(parts)'>Open Order</li><li ng-click='menuItemClick(parts)'>Open PO</li><li ng-click='menuItemClick(parts)'>Return History</li><li ng-click='menuItemClick(parts)'>Supplier History</li><li ng-click='menuItemClick(parts)'>Repair History</li><li ng-click='menuItemClick(parts)'>Alternative Parts</li></ul></div></div></div>"},
                { name: 'materialdesc', displayName: 'Part Description', },
                {
                    name: 'sparable', displayName: 'Sparable'
                },

..

还处理了它,点击以显示单元格模板中的菜单:

$scope.menu = false;

$scope.cellClicked = function (row, col){

                console.log(row.entity.materialnum);
                $scope.menu = true;
            }

单击网格上的行时,菜单不会出现。

需要建议如何展示它。

修改

我得到了访问网格范围内部的答案,但现在我无法为每一行点击定位上下文菜单。如何使位置精确到网格上的点击。

1 个答案:

答案 0 :(得分:1)

在ui-grid模板中的vars之前始终使用grid.appScope

必须是ng-show='grid.appScope.menu'而不是ng-show='menu'。检查所有元素。