过滤器不起作用 ng-repeat
[英] Filter not working ng-repeat
本文介绍了过滤器不起作用 ng-repeat的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的 angular 应用程序中使用 Salvattore (像网格一样的砖石),但是ng-repeat
中的过滤器选项不起作用.我认为这是因为 Salvattore 将每个重复的项目包装在一个单独的 div
中以制作一个网格(在我的例子中它是 div.col-4
)
<div class="row grid" salvatore><div class="entry" ng-repeat="e in data | filter:search">{{e}}
上面的输出类似于以下内容:
<div class="col-4"><div class="entry">e</div><div class="entry">e</div>
<div class="col-4"><div class="entry">e</div><div class="entry">e</div>
<div class="col-4">..
我认为这是导致过滤问题的原因...但我不确定是否诚实:)
问题是: 我应该怎么做才能让它发挥作用?我必须创建自定义过滤器吗?
我为此创建了一个代码笔:http://codepen.io/anon/pen/MpebNV
谢谢.
解决方案
我尝试编写自己的指令,它似乎工作得很好.我已将以下内容添加到 Salvatore 指令中.
app.directive('salvattore', function($timeout, $window,$filter) {返回 {限制:'A',链接:函数(范围,元素,属性){//第一次加载(没有它就不能工作$超时(功能(){element.attr('数据列', true);$window.salvattore.register_grid(element[0]);},0);scope.$watch('search', function(newValue, oldValue) {//我需要这个 hack 因为当 $scope.search 为空时网格没有正确呈现如果(新值==''){var 过滤数据 = scope.data;var 项目 = '';jQuery.each(filteredData, function(index, entry){var ITEM_TEMPLATE = '<div class="entry">{{e}}</div>';var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) {开关(g1){case 'e':返回条目;休息;}});items = items.concat(content);});jQuery('.grid').html(items);$window.salvattore.register_grid(element[0]);}如果(新值){varfilteredData = $filter('filter')(scope.data,scope.search);var 项目 = '';jQuery.each(filteredData, function(index, entry){var ITEM_TEMPLATE = '<div class="entry">{{e}}</div>';var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) {开关(g1){case 'e':返回条目;休息;}});items = items.concat(content);});jQuery('.grid').html(items);$window.salvattore.register_grid(element[0]);}}, 真的);}};});
我知道它看起来很原始,但事实就是如此,但我也知道它可以更简单.也许有人可以检查一下并改进一点,好吗?
这里是代码笔:http://codepen.io/anon/pen/MpebNV
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 div
to make a grid (in my example it's 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
Thanks.
解决方案
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 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
这篇关于过滤器不起作用 ng-repeat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!