s-yadav / angulargrid

Pinterest like responsive masonry grid system for angular
MIT License
277 stars 105 forks source link

Input Search Filter #24

Closed toddchannick closed 8 years ago

toddchannick commented 8 years ago

Is there anyway to trigger a refresh after executing a search filter (ng-repeat="image in images | filter:searchText") on an input box?

The filter works; however, when I clear the input box, all of the elements of the grid return stacked on one another (upon inspection, I see they no longer have a class of "img-loaded", and have lost their "top", "left", and "width" style attributes)

Thank you!

toddchannick commented 8 years ago

Ok, I got it to work by moving my filter out of the angular expression and into to the controller...however, once i clear my text from the input field, it doesn't refresh the layout. Here is my code:


$scope.$watch('searchText',function(val){
    val = val.toLowerCase();
    $scope.bookmarks = $scope.bookmarks.filter(function(obj){
        return obj.title.toLowerCase().indexOf(val) != -1;
    });
  });

Any idea what could be causing this issue?

s-yadav commented 8 years ago

I hope you already have figured out your problem, The problem lies here

$scope.bookmarks = $scope.bookmarks.filter(function(obj){
        return obj.title.toLowerCase().indexOf(val) != -1;
    });

You are filtering on a array and storing on same model again, so next time you type something it will filter the filtered array, and at the end it will be empty. Try this.

var bookmarks = $scope.bookmarks;
$scope.$watch('searchText',function(val){
    val = val.toLowerCase();
    $scope.bookmarks = bookmarks.filter(function(obj){
        return obj.title.toLowerCase().indexOf(val) != -1;
    });
  });

Moreover angular filter does not affect the same model, it creates a new model, so angulargrid can't figureout when to refresh the grids. This is one limitation, which need to be handled using manual watching and filtering.

toddchannick commented 8 years ago

Great, thanks so much for your help On Sun, Dec 20, 2015 at 9:47 PM Sudhanshu Yadav notifications@github.com wrote:

Closed #24 https://github.com/s-yadav/angulargrid/issues/24.

— Reply to this email directly or view it on GitHub https://github.com/s-yadav/angulargrid/issues/24#event-497025312.