[英]Filter not working ng-repeat
我在我的角度应用程序中使用了Salvattore (类似网格的砌体),但是ng-repeat
中的filter选项不起作用。 我认为这是因为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>
上面的输出类似于以下内容:
<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>
我认为这是导致过滤问题的原因...但是我不太确定是不是很诚实:)
问题是: 我应该怎么做才能使其正常工作? 我必须建立一个自定义过滤器吗?
我为此创建了一个代码笔: http ://codepen.io/anon/pen/MpebNV
谢谢。
因此,齐射与角不相容。 您可以编写指令来实现其功能。 或使用jquery来实现“过滤器”功能。
我试图编写自己的指令,它似乎工作得很好。 我在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);
}
};
});
我知道它看起来很原始,但事实就是如此,但我也知道它可以更简单。 也许有人可以检查一下并有所改善,好吗?
这是codepen: http ://codepen.io/anon/pen/MpebNV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.