Question

我在我的角应用中使用 Salvattore （像网格一样砌筑），但ng-repeat中的过滤器选项不起作用。我认为这是因为 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>

我认为这是导致过滤问题的原因......但我并不确定是否诚实：）

问题是： 我该怎么做才能让它发挥作用？我是否需要创建自定义过滤器？

我为此创建了一个codepen：http://codepen.io/anon/pen/MpebNV

感谢。

Answer 1

所以salvattore与角度不相容。您可以编写指令来实现其功能。或者使用jquery来实现＆＃34;过滤器＆＃34;功能

Answer 2

我试着编写自己的指令，似乎工作得很好。我在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

过滤不工作ng-repeat

2 个答案: