Filter Not Working Ng-repeat
I'm using Salvattore (masonry like grid) in my angular app but the filter option in ng-repeat does not work. I think it's because Salvattore wraps each repeated item in a separate
Solution 1:
So the salvattore incompatible with angular. You can write a directive to implement its function. Or use jquery to implement a "filter" function.
Solution 2:
I tried to write my own directive and it seems to be working quite good. I've added the following to the salvattore directive.
app.directive('salvattore', function($timeout, $window,$filter) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// First load (does not work without it$timeout(function(){
element.attr('data-columns', true);
$window.salvattore.register_grid(element[0]);
},0);
scope.$watch('search', function(newValue, oldValue) {
// I needed this hack because the grid didn't render properly when $scope.search was emptyif(newValue=='') {
var filteredData = scope.data;
var items = '';
jQuery.each(filteredData, function(index, entry){
var ITEM_TEMPLATE = '<div class="entry">{{e}}</div>';
var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) {
switch (g1) {
case'e': return entry; break;
}
});
items = items.concat(content);
});
jQuery('.grid').html(items);
$window.salvattore.register_grid(element[0]);
}
if (newValue) {
var filteredData = $filter('filter')(scope.data, scope.search);
var items = '';
jQuery.each(filteredData, function(index, entry){
var ITEM_TEMPLATE = '<div class="entry">{{e}}</div>';
var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) {
switch (g1) {
case'e': return entry; break;
}
});
items = items.concat(content);
});
jQuery('.grid').html(items);
$window.salvattore.register_grid(element[0]);
}
}, true);
}
};
});
I know it looks primitive but it is what it is, but I also know it can be simpler. Maybe someone can check this and improve a little bit, please?
Here's codepen: http://codepen.io/anon/pen/MpebNV
Post a Comment for "Filter Not Working Ng-repeat"