首页 > 解决方案 > 禁用 Angularjs 模型弹出滚动条

问题描述

第一次在模型弹出窗口中加载数据时,它不会在模型弹出窗口中显示滚动条。但是当我在过滤数据显示后执行搜索功能时,滚动条会出现在模型弹出窗口中。如何修复它`

this is the code that model popu generating 

  

 1. $scope.AddEntity = function () {
            $modal.open({
                templateUrl: 'ngTemplateAddItem',
                backdrop: 'static',
                controller: [
                            '$scope', '$http', '$modalInstance', function ($scopeChild, $http, $modalInstance) {
                                $scopeChild.searchAccont = function () {
                                    $modal.open(
                                                {
                                                    templateUrl: 'ngAccountSearch',
                                                    backdrop: 'static',
                                                    controller: [
                                                                '$scope', '$http', '$modalInstance', function ($scopeChild2, $http,
$modalInstance) {
                                                                    //account search grid
                                                                    $scopeChild2.gridAccount = {
                                                                        showFooter: true,
                                                                        enableSorting: true,
                                                                        multiSelect: false,
                                                                        enableRowSelection: true,
                                                                        enableSelectAll: false,
                                                                        enableRowHeaderSelection: false,
                                                                        selectionRowHeaderWidth: 35,
                                                                        noUnselect: true,
                                                                        enableGridMenu: true,
                                                                        columnDefs: [{ field: "ACC_CODE", displayName: "Account Code" },
    															{ field: "AccountNAME", displayName: "Account Name" },
    															 { field: "EXCHANGE_ACCOUNT", displayName: "EXCHANGE_ACCOUNT", visible: false },
    															//{ field: "Currency", displayName: "Currency" },
    											 {
    											     enableSorting: false,
    											     name: 'Select',
    											     cellTemplate: '<button class="btn btn-primary btn-xs" ng-click="grid.appScope.selectData(row)"
data-dismiss="modal" >Select</button>'
    											 }],

                                                                        onRegisterApi: function (gridApi) {
                                                                            $scopeChild2.gridApiSCEdit = gridApi;
                                                                            gridApi.selection.on.rowSelectionChanged($scopeChild2, function
(row) {
                                                                                $scopeChild2.selectedEntitySCEdit = row.entity;
                                                                            });
                                                                        },
                                                                    };
                                                                    $scopeChild2.selectData = function (row) {
                                                                        $scopeChild.obj1.ACC_CODE = row.entity.ACC_CODE;
                                                                        $scopeChild.obj1.AccountNAME = row.entity.AccountNAME;
                                                                        $scopeChild.obj1.EXCHANGE_ACCOUNT = row.entity.EXCHANGE_ACCOUNT;
                                                                       // $scopeChild.obj1.curruncy = row.entity.Currency;
                                                                        $modalInstance.dismiss('cancel');
                                                                        $scopeChild.load();
                                                                        

                                                                    }
                                                                    $scopeChild2.ChangeSizeofGridAccount = function () {
                                                                        var height = $('.ui-grid-row').height();
                                                                        if (height == 0) {
                                                                            height = 31;
                                                                        }
                                                                        var PageSize = $scopeChild2.gridAccount.paginationPageSize;
                                                                        var DataAmount = $scopeChild2.gridAccount.data.length;
                                                                        var length = $scopeChild2.gridAccount.paginationPageSize;
                                                                        var page = $scopeChild2.gridApiSCEdit.pagination.getPage();
                                                                        var divider = parseFloat(DataAmount / length);
                                                                        if (divider % 1 != 0) {
                                                                            var a = parseFloat(1 - (divider % 1));
                                                                            divider = (divider + a);
                                                                        }

                                                                        if (divider == page) {
                                                                            var remaindataAmount = DataAmount - ((page - 1) * length);
                                                                            $("#grid2.ui-grid").css({ 'height': (height * remaindataAmount) +
350 + 'px', 'min-height': '400px' });

                                                                            $("#grid2.ui-grid-viewport").css({ 'height': (height *
remaindataAmount) + 300 + 'px', 'min-height': '350px' });


                                                                        }
                                                                        else {
                                                                            $("#grid2.ui-grid").css({ 'height': (height * length) + length*30+50
+ 'px', 'min-height': '400px' });

                                                                            $("#grid2.ui-grid-viewport").css({ 'height': (height * length) +
length*30 + 'px', 'min-height': '350px' });
                                                                        }

                                                                    }
                                                                    $scopeChild2.searchAccount = function (obj1) {

                                                                        var searchobj = angular.toJson({ 'obj': obj1 });
                                                                        var req = {
                                                                            method: 'POST',
                                                                            url: gridFactory.AllAccountListURL,
                                                                            headers: {
                                                                                'Content-Type': 'application/json; charset=utf-8'
                                                                            },
                                                                            data: searchobj
                                                                        }

                                                                        $http(req).success(function (data) {
                                                                            $scopeChild2.gridAccount.data = data;
                                                                            $scopeChild2.ShowGridAcc = true;
                                                                        });

                                                                    };
                                                                    $scopeChild2.searchAccount(null);
                                                                    $scopeChild2.cancel = function () {
                                                                        $modalInstance.dismiss('cancel');
                                                                        $scopeChild.load();
                                                                    };
                                                                }],
                                                });
                                }

`

标签: javascriptangularjs

解决方案


在这种情况下,我们可以通过扩展模式弹出窗口的长度来解决问题,但这不是正确的方法。所以我所做的完全替换了表格的网格,现在它的作品找到了

 if (divider == page) {
                                                                        var remaindataAmount = DataAmount - ((page - 1) * length);
                                                                        $("#grid2.ui-grid").css({ 'height': (height * remaindataAmount) + 1700 + 'px', 'min-height': '400px' });

                                                                        $("#grid2.ui-grid-viewport").css({ 'height': (height * remaindataAmount) + 1650 + 'px', 'min-height': '350px' });


                                                                    }
                                                                    else {
                                                                        $("#grid2.ui-grid").css({ 'height': (height * length) + length*30+ 4500 + 'px', 'min-height': '400px' });

                                                                        $("#grid2.ui-grid-viewport").css({ 'height': (height * length) + length*30 +3450+ 'px', 'min-height': '350px' });
                                                                    }


推荐阅读