AngularJS - 基於類別的複雜過濾等

我已經做了一些谷歌福，但我所能找到的關於AngularJS過濾器的一些簡單的例子是關於簡單過濾器（大部分是單個字段的值）。AngularJS - 基於類別的複雜過濾等

我在thoguh之後會有些複雜，而且我在尋求如何解決問題的幫助。

假設你有以下JSON對象的數組：

{ 
    "id":"1", 
    "title":"Title", 
    "categories":[ 
     {"id":"14","name":"DIY"} 
    ], 
    "topics":[ 
     {"id":"12","name":"Junk Food"} 
    ] 
}, 
{ 
    "id":"2", 
    "title":"Title 2", 
    "categories":[ 
     {"id":"4","name":"Test"}, 
     {"id":"14","name":"DIY"}, 
    ], 
    "topics":[ 
     {"id":"2","name":"Food"} 
    ] 
} 

[...]

所以基本上每個對象可以有「類別」和/或「主題」的任何數目。

現在，我的目標是創建一個前端接口，允許我將各種過濾器累積應用於這些JSON對象。

例如，我想說：僅顯示具有category.id = 14 AND topic.id = 2 [etc]的條目，並且仍支持過濾結果的深層鏈接。

因此，這裏也正是我堅持：

什麼是用於該路線的最佳方式（即你將如何構建的URL以支持過濾器的任何數量（根據不同的數值）

1）

2）我應該如何跟蹤添加的過濾器？（即，多少和哪些過濾器已經由用戶選擇）

看爲AngularJS filters的文檔，我會明顯使用第二示例的過濾參數：

對象：一個模式對象可用於過濾數組中包含的對象的特定屬性。例如{名稱：「M」，電話：「1」}謂詞將返回一個包含屬性名稱包含「M」和屬性手機包含「1」的項目數組。可以使用特殊的屬性名稱$（如在{$：「text」}中）來接受對該對象的任何屬性的匹配。這相當於如上所述的簡單子串匹配字符串。

但我不能就如何確保我檢查了右外場（即topic.id爲主題VS category.id的類別）那麼肯定......

簡單地說，我我很想看到這樣一個不太重要的過濾方案的例子。

來源

2012-11-09 Pierlo Upitup

目前，過濾器不支持內穿越像你想要的陣列。你必須編寫自己的自定義過濾器。 –

我認爲你需要類似this來代替。看到他的'其他簡單的選擇'。我在注入到控制器的服務中執行復雜的過濾，並將我的$ scope中的過濾列表展示給View。我只使用Angular過濾器進行相對簡單的任務。

回覆：關於如何公開此URL上的問題，你需要表示這些過濾器爲字符串的一些方法，並且可以使用$位置和$ routeParams將它們填充到控制器中。

來源

2012-11-09 21:04:45

感謝您的鏈接！ –

，如果你寫一個自定義過濾器這可以工作：

var module = angular.module('app', []); 

module.filter("property", ["$filter", function($filter){ 
    var parseString = function(input){ 
     return input.split("."); 
    } 

    function getValue(element, propertyArray) { 
     var value = element; 

     angular.forEach(propertyArray, function(property) { 
      value = value[property]; 
     }); 

     return value; 
    } 

    return function (array, propertyString, target) { 
     var properties = parseString(propertyString); 

     return $filter('filter')(array, function(item){ 
      return getValue(item, properties) == target; 
     }); 
    } 
}]);

HTML部分可以是這樣的：

<ul>   
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>"> 
     {{ data }} 
    </li> 
</ul>

信用：OnOFF-Switch blog

來源

2014-09-05 11:46:16 Peter

AngularJS - 基於類別的複雜過濾等

回答

相關問題