web-dev-qa-db-ja.com

ui-grid定数を使用してスクロールバーを無効にする

最新バージョンのui-grid（v3.0.0-rc.16）では、水平スクロールバーと垂直スクロールバーを別々にオフにすることができます。私はこれを交換することで機能させました

$scope.gridOptions.enableScrollbars = false;

と

$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;

Ui-gridのソースには、スクロールバー用に定義された3つの定数があります。

scrollbars: {
  NEVER: 0,
  ALWAYS: 1,
  WHEN_NEEDED: 2
}

Ui-gridはまだ不安定で非常に頻繁に変更されるという事実に直面して、特定の値の代わりにこれらの定数を使用する方が快適だと感じます。しかし、どうすればそれらにアクセスできますか？

プランカー： http://plnkr.co/edit/h0ewAZK616rKCH3T62te

angularjsscrollbarangular-ui-grid
25
nabinca

Githubで私の答えを得ました：

次のように、uiGridConstantsをコントローラーに渡すだけでした。

angular.module('myApp').controller('myCtrl',function($scope,uiGridConstants) {
    ...

    $scope.gridOptions.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;

    ...
})
49
nabinca

ジョンパパスタイル：

ExampleController.$inject = ['$scope', 'uiGridConstants'];
function ExampleController($scope, uiGridConstants) {
    var vm = this;

    vm.gridOptions = {
        enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
        enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER
    };
}
15
Laura Riera

これに対する回避策（WHEN_NEEDEDは現在無効になっているため）は、enableHorizontalScrollbar: 0あなたのgridOptionsに、そしてあなたのスタイルシートに以下があります：

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important;
}

水平スクロールバーは、必要な場合にのみ表示されるようになりました。

11
Gethin