How to filter displayed data in ui-grid by using angularjs?

问题

This is my code

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

app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
       
        var myDummyData = [{name: "Moroni",address:"one", age: 50},
            {name: "Tiancum",address:"vij", age: 43},
            {name: "Jacob",address:"dfr", age: 27},
            {name: "Nephi",address:"mnc", age: 29},
            {name: "Enos",address:"trr", age: 34}];
       

        $scope.filterOptions = {
            filterText: ''
        };
        
        $scope.gridOpts = {
            data: myDummyData,
           // enableFiltering: true,
            columnDefs: [
                        {name: 'Name', field: 'name', enableFiltering: true},
                        {name: 'Address', field: 'address', enableFiltering: true}
                    ]
        };
        
        $scope.refreshData = function() {
            $scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
        };
        
       
    }]);

/* Styles go here */

.cart-item.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  background-color: yellow;
}
.cart-item.ng-enter-active {
  background-color: white;
}

.myGrid {
    width: 1200px;
    height: 800px;
}

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
        
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
        
      
        
        <link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        
        <link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
        <script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
      
    </head>
    <body ng-controller="TableCrtl">

        
        
        <div>
           
            <br>
            <br>
            <input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText">
            <br>
            <div range-slider min="0" max="100" model-min="15" model-max="35"></div>
            <br>
            <div id="grid1" ui-grid="gridOpts" class="grid"></div>
        </div>

        <script src="script.js"></script>
        
        
        
    </body>
</html>

This is my plunker :- http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code

 $scope.refreshData = function() {
        $scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
    };

回答1:

May be this is what you are looking for.

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: 'address' }          
    ]
  };

  $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', 'address'].forEach(function( field ){
        if ( row.entity[field].match(matcher) ){
          match = true;
        }
      });
      if ( !match ){
        row.visible = false;
      }
    });
    return renderableRows;
  };
}])

});

The code is copied from this link. The

onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
    }

and "$scope.singleFilter" is the main thing you need to look.

回答2:

Instead of using the default filter, define a custom filter which filters based on the name and address only. Here is the basic logic.

Filter:

app.filter('customfilter', function () {
    //Your logic to filter based on name and address
});

Controller:
Inject filter in the controller and use it.

$scope.refreshData = function() {
    $scope.gridOpts.data = $filter('customfilter')(arguments for filter);
};

来源：https://stackoverflow.com/questions/33412876/how-to-filter-displayed-data-in-ui-grid-by-using-angularjs

标签

angularjs

angular-ui-grid