uiグリッドの下部にあるカウント表示をリセットする方法

Question

ボタングリッドではなく、グリッドによって提供されるネイティブヘッダフィルタからuiグリッドデータをフィルタリングする必要があります。

私のFilterボタンのリスナーで私は元のデータ配列をフィルタリングし、フィルタリングされたエントリを$scope.gridDataオブジェクトに再割り当てします。私はresetボタンも持っています。リセットをクリックすると、元のデータ配列が$scope.gridDataオブジェクトに再割り当てされます。

これでフィルタリングが正常に動作します。しかし、私は問題が発生した場合： データは外部Filterボタンを使用してフィルタリングされます。 内部（グリッドフィルタ）フィルタが列に適用されます。 データはResetボタンを使用してリセットされます。

このリセットでは、グリッドは内部フィルタによってフィルタリングされたエントリを保持します。しかし、行数表示では、グリッドはn-10 out of total itemsと表示されます。ここでの合計項目は元のデータ配列の数ですが、グリッドは現在フィルタリングされたデータを保持しています。

グリッド数の表示を手動で変更する方法はありますか。

Answer 1

私が正しくあなたを理解していれば、あなたはUIグリッドのフッターをオーバーライドして調整を行うことができます：

var app = angular.module('app', ['ui.grid']); 
 
app.controller('MainCtrl', ['$scope', function($scope) { 
 
    var adjustedGridFooterTemplate = 
 
    //same as normal template, but with: + ' (+/- my adjustment)' AND + ' (+/- another adjustment)' 
 
    "<div class=\"ui-grid-footer-info ui-grid-grid-footer\"><span>{{'search.totalItems' | t}} {{grid.rows.length + ' (+/- my adjustment)'}}</span> <span ng-if=\"grid.renderContainers.body.visibleRowCache.length !== grid.rows.length\" class=\"ngLabel\">({{\"search.showingItems\" | t}} {{grid.renderContainers.body.visibleRowCache.length + ' (+/- another adjustment)'}})</span></div>"; 
 
    $scope.gridOptions = { 
 
    enableFiltering: true, 
 
    showGridFooter: true, 
 
    gridFooterTemplate: adjustedGridFooterTemplate, 
 
    data: [{name: "Moroni", age: 50}, 
 
      {name: "Tiancum", age: 43}, 
 
      {name: "Jacob", age: 27}] 
 
    } 
 
}]);

div[ui-grid] { 
 
    height: 200px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptions" class="gridStyle"> 
 
    </div> 
 
</div>

アップデート（以下のコメントから）

あなたが言います$scope.gridDataを再割り当てします。angular.copy()を使用して、再割り当てを実行してください。$scope.gridData = angular.copy(newData);は、内部のグリッドウォッチも再火災を確実にするためです。

ご希望の場合は、他にご質問がある場合はお知らせください。