angularj ui grid searching

Question

I'm looking for tutorial or example on how to implement a simple input text for searching in the grid. My attempt (but ng-keyup require angularjs > 1.1.3 and I've got 1.0.7)

<input type="text" ng-keyup="mySearch()" ng-model="searchText">
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
                    setTimeout(function () {
                        var data;
                        if (searchText) {
                            var ft = searchText.toLowerCase();
                            $http.get('largeLoad.json?q='+encodeURIComponent(ft)).success(function (largeLoad) {        
                                $scope.setPagingData(largeLoad,page,pageSize);
                            });            
                        } else {
                            $http.get('largeLoad.json').success(function (largeLoad) {
                                $scope.setPagingData(largeLoad,page,pageSize);
                            });
                        }
                    }, 100);
                };
$scope.mySearch = function(){
                    console.log($scope.searchText);
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,$scope.searchText);
                }

Bye

NB its a fake request against a json file just to make the example.

Update: I'm using ng-grid-1.3.2

Answer 1

Basically to solve this problem I think you can use a solution similar to what I've done below where I'm just watching the property of the model for changes and firing a function to do the filtering on the data set at that point.

The HTML for the text input

<input type="text" placeholder="Type to filter" ng-model="gardenModel.externalFilterText"/>

The JavaScript that filters the data set (also included the part I had a watch on a service to update the data in the first place too or if the data is refreshed to reapply the filter).

//This function is called every time the data is updated from the service or the filter text changes
$scope.filterGardens = function(filterText) {
  //Basically everything in this function is custom filtering specific
  //to the data set I was looking at if you want something closer to the
  //real implementation you'll probably have to dig through the source (I believe they separated the search filter code into it's own file in the original project)

  //Creating a temporary array so changes don't cause a bunch of firing of watchers
  var tempToShow = [];

  //doing case insensitive search so lower case the filter text
  filterText = filterText.toLowerCase();

  //If the filter text is blank just use the whole data set
  if(!filterText || filterText == "")
  {
    $scope.gardenModel.shownGardens = $scope.gardenModel.gardens;
    return;
  }

  //step through each entry in the main list and add any gardens that match
  for (var i = 0; i < $scope.gardenModel.gardens.length; i++) {
    var curEntry = $scope.gardenModel.gardens[i];
    var curGarden = curEntry.curGarden;


    if(curGarden["Garden Name"] && curGarden["Garden Name"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden["Address"] && curGarden["Address"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden["Ownership"] && curGarden["Ownership"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
      tempToShow.push(curEntry);
    else if(curGarden.gardenId && curGarden.gardenId == filterText)
      tempToShow.push(curEntry);
  };
  $scope.gardenModel.shownGardens = tempToShow;
}

//Watch for any changes to the filter text (this is bound to the input in the HTML)
$scope.$watch('gardenModel.externalFilterText', function(value) {
  $scope.filterGardens(value);
});

//Watch for any changes on the service (this way if addition/edit are made and
//refresh happens in the service things stay up to date in this view, and the filter stays)
$scope.$watch( function () { return gardenService.gardens; }, function ( gardens ) {
  $scope.gardenModel.gardens = gardens;
  $scope.filterGardens($scope.gardenModel.externalFilterText);
});

Edit Cleaned up the code formatting a bit and added some comments.