如何用angularJS中的多個複選框創建一個動態過濾器

我一直在尋找嚴峻的日子，如何在AngularJS中輕鬆創建一個包含多個複選框的動態過濾器，並且我找到的解決方案都不滿意。如何用angularJS中的多個複選框創建一個動態過濾器

下面是一個過濾器的示例，當取消選中複選框時將顯示所有內容，並在複選框被選中時過濾數據。（適合搜索引擎來尋找帶wifi的酒店，陽臺...爲例）

篩選：

app.filter('conveniences_filter', function() { 
    return function(items, types) { 
     var filtered = []; 
     var displayItem; 
     angular.forEach(items, function(item) { 
      displayItem = true; 
      angular.forEach(types, function(type, key) {   
       if(type == true && item[key] == false) { 
        displayItem = false; 
       } 
      }); 
      if(displayItem == true) { 
       filtered.push(item); 
      } 
     }); 
     return filtered; 
    }; 
});

在你的控制器：

$scope.types = {wifi: false, balcony: false}

在您的HTML中

ng-repeat =「property in property | conveniences_filter：類型」

重要提示：您在$ scope.types密鑰必須與您的鑰匙在你的屬性的項目，或者它不是要去工作在這裏的屬性

例：

對象{名稱：財產，無線網絡：假的，陽臺：真正}

我希望這會是有用的:)

來源

2014-07-23 Maxime Plancke

我認爲這不是100％清楚你的要求在這裏。至少從我寫的代碼中得到的結果是，您想要根據對象的屬性值過濾對象列表，並且使用用於與對象進行比較的「模式」對象。

爲了填補需求中的空白，我假設您想針對包含也需要在項目中匹配的屬性的「模式」對象進行驗證。我還假設，如果一個屬性不在「模式」對象中，那麼它將與比較無關。此外，我還假定您希望「模式」中的所有現有屬性都是有效/匹配的，否則不會考慮該項目。

我已經整理了一個解決上述要求的小例子。一般來說，您應該使用ECMA5.1附帶的數組額外功能，並使事情變得更加簡單和實用。

例子：http://jsbin.com/velobi/1/edit

乾杯祗園

來源

2014-07-23 12:12:38 gkunz

我只是呈現的方式來做到這一點。但是，感謝您的回答我是AngularJS的一名成員，很高興看到其他更好的方式來做到這一點。不同之處在於，在我使用的解決方案中，篩選器僅在檢查複選框時起作用。例如沒有任何過濾器，你可以看到所有的屬性，即使他們沒有WiFi。當你檢查wifi複選框時，過濾器會隱藏沒有wifi的屬性。有時可能有用 –

嗨，多數民衆贊成酷我認爲它總是很高興看到其他方法。不一定比另一個好。您仍然可以在我的解決方案中實現您的方法，但需要注意的是，在屬性對象中，CHECKED表示鍵：true，UNCKECKED表示該屬性不應存在。 key：false將意味着該屬性應該在該項目中顯式爲false。 – gkunz

如何用angularJS中的多個複選框創建一個動態過濾器

回答

相關問題