具有數字和日期的ng-repeat多重過濾器

我正在使用ng-repeat繪製表格線，並且我正在過濾多個文本參數。這裏有一個固定字符串的簡單例子具有數字和日期的ng-repeat多重過濾器

<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_'}"></tr>

這工作正常，現在我想過濾一個數字，測試它是否低於給定值。是否有可能使用如下所示的過濾器？我找不到角文檔中的任何類似的事情，但我不能相信一個簡單的解決方案是不存在

<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_', number: '<5' }"></tr> 
<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_'} | filter: 'thisOffer.number < 5' "></tr>

來源

2016-03-02 Naigel

應用這個答案，你this fiddle工作（從this answer啓發）後

<div ng-app> 
    <div ng-controller="TodoCtrl"> 
    <ul> 
     <li ng-repeat="friend in friends | filter: {name: 'John'} | filter: greaterThan('phone', 1)"> 
     <span>{{friend.name}}</span> 
     <span>{{friend.phone}}</span> 
     </li> 
    </ul> 
    </div> 
</div>

來源

2016-03-02 14:20:29

它的工作原理，但它放慢令人難以置信的渲染。我擔心唯一有效的方法就是使用自定義的「過濾器」：（ – Naigel

爲此，應該深入研究角度的源代碼，或者更好地詢問「自定義過濾器是否放慢速度？」。但是我「認爲」它不可以 –

我可以把for循環中的分配成本看作零。 –

根據https://docs.angularjs.org/guide/filter你可以鏈過濾器，所以你的第二個解決方案應該工作。

如果沒有，請提供一個小提琴，所以我可以看看它

來源

2016-03-02 14:00:42 Aides

當'filter'接受一個字符串輸入它尋找一個匹配，它不執行的表達，使之無法正常工作 – Naigel

啊好吧，認爲你的問題是關於鏈接過濾器，而不是如何設置數字過濾器。請參閱http://stackoverflow.com/a/35749798/4068027以獲取解決方案。 – Aides

您將需要創建一個斷言函數在相關範圍內，並用它在你的NG-重複，如：

<tr ng-repeat="thisOffer in offerList | filter: lessThan('Number', 5)""></tr>

來源

2016-03-02 14:23:23 Vasan

在相關範圍內創建一個功能：

$scope.greaterThan = function(prop, val){ 
    return function(item){ 
     return item[prop] > val; 
    } 
}

作爲第一個參數，它在對象上需要一個屬性名稱。第二個參數是一個整數值。

用它在你看來是這樣的：

<tr ng-repeat="thisOffer in offerList | filter: greaterThan('Number', 0)">

來源

2016-03-03 09:26:47

具有數字和日期的ng-repeat多重過濾器

回答

相關問題