.refresh() doesnt work after i used filter on ng-repeat

[segux]

When i try to filter ng-repeat like this

<select class="sel1" ><option value="1">option1</option></div>
<div class="results">
<div class="item" ng-repeat="item in items | filter:filter" ></div>
</div>
Im using on select change like this

var wall = new freewall($(".results"));
wall.reset({
     selector: '.item',
     draggable: true,
     animate: true,
     cellW: 185,
     cellH: 180,
     fixSize: 0,
     gutterY: 7,
     onResize: function () {
                wall.fitWidth();
  }
});

$(".sel1").change(function(){
      wall.refresh();
});

It doesn't works.

Items filtered stay on his position with opacity 0 but not reordered

[edouard-lopez]

:+1:

Got the same issue. When testing in Firefox browser console I can create a freewall instance:

var wall = new freewall("#metro-ui"); 

But calling refresh() method return:

wall.refresh()
TypeError: can't convert null to object

The method exist in the wall object with following description:

refresh: n/<.refresh()
  arguments: null
  caller: null
  length: 0
  name: ""

[edouard-lopez]

Here is how I solved it:

The refresh() method should be called by an angular event. Here is my ng-repeat block:

<a ng-repeat="service in vm.services | filter:search">
    …
</a>

First, add a ng-change attribute to call the refresh() in the element that update your filter.

<input ng-model="search" ng-change="ctrl.wall.refresh()" type="text" >

Then your controller should instanciate the wall and expose it to the view:

function dashboardController(apiService) {
    var ctrl = this;
    ctrl.wall = null;  // expose wall to the view
    …
    initFluidTiling()

    function initFluidTiling() {
        ctrl.wall = new freewall("#metro-ui");  // instanciation
        ctrl.wall.reset({ … });
    }
}

})();