過濾器不工作ng-repeat

我在我的角度應用程序中使用Salvattore（砌體像網格）但ng-repeat中的過濾器選項不起作用。我想這是因爲Salvattore包裹每次重複的項目在一個單獨的div，使網格（在我的例子是div.col-4）過濾器不工作ng-repeat

<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>

我認爲這是導致過濾問題的原因......但我不太確定是否誠實:)

該問題stion是：我應該怎麼做才能使它工作？我必須創建自定義過濾器嗎？

我創建了這個codepen：http://codepen.io/anon/pen/MpebNV

感謝。

來源

2017-03-04 Rafcio Kowalsky

所以你有什麼問題嗎？ –

@GeomanYabes問題是怎麼做才能使它工作？ –

所以salvattore與角度不相容。你可以編寫一個指令來實現它的功能。或者使用jQuery來實現「過濾器」功能。

來源

2017-03-04 12:54:35 blackmiaool

我試圖寫我自己的指令，它似乎工作得很好。我已將以下內容添加到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

來源

2017-03-04 17:04:45

過濾器不工作ng-repeat

回答

相關問題