編寫允許切換的基本Angular過濾器

我正在學習Angular和JS，但我遇到了一個過濾器函數，可以通過按鈕過濾開/關（切換）對象。編寫允許切換的基本Angular過濾器

所以給出類似ng-repeat="o in objects | filter:objectsFilter"

如果一個對象是這樣的：

{'id':1, 'name':'foo', 'property1':'bar', 'property2': 23, ...'}

我們有一些按鈕，像複選框來過濾結果定了下來：

<button ng-click="objectsFilter('property1', '=', 'bar')">Bar</button> 
<button ng-click="objectsFilter('property1', '=', 'baz')">Baz</button> 
<button ng-click="objectsFilter('property2', '>', 22)">Greater than 22</button> 
<button ng-click="objectsFilter()">Clear All</button> 
...

其中objectsFilter([property], [comparison operator], [value])。我不知道這是否正確（我從Laravel的查詢構建器中採用了它）。請隨意更改以適應解決方案。

的問題

我將如何使過濾器可切換和可堆疊？

可切換：如果相同的屬性，比較運算符和值已被過濾，請刪除該過濾器。

可疊加：非常明瞭，允許一次使用多個過濾器。

到目前爲止，所有我得到的只是一個靜態過濾：

$scope.objectsFilter = function(object) 
    { 
     return object.property1 == 'bar'; // filters for property1: bar only. 
    };

我不知道我應該採取（除一堆if語句），但我做的方法有一種感覺，與角度很比看起來更容易。任何幫助？

來源

2014-02-27 tiffanyhwang

我猜你想要的東西是這樣的：

HTML：

<body ng-controller="myController"> 
    <div ng-repeat="o in objects | objectsFilter:'value':'>':30">{{o.value}}</div> 
</body>

JS：

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

app.controller('myController', function($scope) { 
    console.log('app loaded'); 
    $scope.objects = [{value:10},{value:20},{value:30},{value:40},{value:50},{value:60},{value:70}]; 
}); 

app.filter('objectsFilter', function() { 
    return function(object, property, comparator, expected) { 
    var filteredObject = [], 
     filtered = false; 
    for (var i = 0; i < object.length; i++) { 
    switch(comparator) { 
     case '=': 
     filtered = !(object[i][property] === expected); 
     break; 
     case '<': 
     filtered = !(object[i][property] < expected); 
     break; 
     case '>': 
     filtered = !(object[i][property] > expected); 
     break; 
     default: 
     filtered = false; 
    } 
     if (!filtered) { 
     filteredObject.push(object[i]); 
     } 
    } 
    return filteredObject; 
    }; 
});

工作jsfiddle

來源

2014-02-27 12:49:02 Wawy

編寫允許切換的基本Angular過濾器

回答

相關問題