[英]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. 我在我的角度应用程序中使用了Salvattore (类似网格的砌体),但是
ng-repeat
中的filter选项不起作用。 I think it's because Salvattore wraps each repeated item in a separate div
to make a grid (in my example it's div.col-4
) 我认为这是因为Salvattore将每个重复的项目包装在单独的
div
以形成网格(在我的示例中是div.col-4
)
<input type="text" ng-model="search">
<div class="row grid" salvattore>
<div class="entry" ng-repeat="e in data | filter:search">
{{e}}
</div>
</div>
The output of the above is similar to the following: 上面的输出类似于以下内容:
<div class="row grid" salvattore="" data-columns="3">
<div class="col-4">
<div class="entry">e</div>
<div class="entry">e</div>
</div>
<div class="col-4">
<div class="entry">e</div>
<div class="entry">e</div>
</div>
<div class="col-4">
..
</div>
</div>
I think this is what causes the problem with filtering... but I'm not really sure to be honest :) 我认为这是导致过滤问题的原因...但是我不太确定是不是很诚实:)
The question is: What should I do to make it work? 问题是: 我应该怎么做才能使其正常工作? Do I have to crate a custom filter?
我必须建立一个自定义过滤器吗?
I've created a codepen for this: http://codepen.io/anon/pen/MpebNV 我为此创建了一个代码笔: http ://codepen.io/anon/pen/MpebNV
Thanks. 谢谢。
So the salvattore incompatible with angular. 因此,齐射与角不相容。 You can write a directive to implement its function.
您可以编写指令来实现其功能。 Or use jquery to implement a "filter" function.
或使用jquery来实现“过滤器”功能。
I tried to write my own directive and it seems to be working quite good. 我试图编写自己的指令,它似乎工作得很好。 I've added the following to the salvattore directive.
我在salvattore指令中添加了以下内容。
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 empty
if(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 这是codepen: http ://codepen.io/anon/pen/MpebNV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.