2016-05-18 12 views
1

Ich habe einige Daten mit Angular UI-Grid, die ich für eine einzelne Spalte Wert mit einem einzigen Filter-Taste filtern möchten.Angular UI-Grid Benutzerdefinierter Filter Button

Der Filtereingang funktioniert, aber der Filter Button funktioniert noch nicht. Ist es möglich pragmatisch eine Filtertaste zu haben?

Plunker: http://plnkr.co/edit/R6PhMiBbaeqj9ErjdvY1?p=preview

HTML:

<div ng-controller="MainCtrl"> 

    <p><button ng-click='filterBtn()'>Filter for "Company = Mixers"</button></p> 

    <p><input ng-model='filterValue'/><button ng-click='filter()'>Filter</button></p> 

    <div id="grid1" ui-grid="gridOptions" class="grid"></div> 

</div> 

JS:

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    var today = new Date(); 
    $scope.gridOptions = { 
    enableFiltering: false, 
    onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
    }, 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'company' } 
    ] 
    }; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
    }); 

    $scope.filterText = 'Mixers'; 

    $scope.filterBtn = function() { 
    $scope.gridApi.grid.columns[1].filters[0] = { 
     condition: uiGridConstants.filter.EXACT, 
     term: 'Mixers' 
    }; 

    $scope.gridOptions.enableFiltering = true 
    $scope.gridApi.grid.refresh(); 
    } 

    $scope.filter = function() { 
    $scope.gridApi.grid.refresh(); 
    }; 

    $scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     [ 'name', 'company' ].forEach(function(field){ 
     if (row.entity[field].match(matcher)){ 
      match = true; 
     } 
     }); 
     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    }; 
}]); 
+0

was genau benötigen Sie, weil Sie eine Filtertaste in Ihrem Plunkr haben – johan

+0

Der Filter mit Eingang funktioniert, aber der Filterknopf nicht. Ich muss den Filter-Button funktionieren lassen. – simple

Antwort

3

Ok, ich habe es mit beiden Tasten zu arbeiten:

http://plnkr.co/edit/25r5aBC0wAtDTEE8gOcO?p=preview

$scope.filterText = ''; 

    $scope.filterBtn = function() { 
    $scope.filterText = 'Mixers'; 
    $scope.gridApi.grid.refresh(); 
    } 

    $scope.filter = function() { 
    $scope.filterText = $scope.filterValue; 
    $scope.gridApi.grid.refresh(); 
    }; 
+0

Kleiner Punkt. In Ihrem PLNKR muss der singleFilter nicht auf dem $ scope stehen. Das fügt nur dem $ Digest-Zyklus hinzu. Ich habe es noch nicht mit RegisterRowsProcessor versucht, also danke, dass du das gezeigt hast. – Gary

Verwandte Themen