current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite
2

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);
    };
share|improve this question
    
what is your question? – hic1086 Oct 29 at 12:41
    
In the above grid name and address fields displayed.when user enter age value in searchtext data filtered and displayed. eg:- enter 50 on searchtext ,result:- one row data(moroni),but i want to display no records,because user enter age value, i want to search name and address fields only not entire grid columns. – durga siva kishore mopuru Oct 30 at 2:35

2 Answers 2

up vote 0 down vote

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);
};
share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.