2016-04-14 75 views
1

我有一個簡單的NG-重複這樣的:如何使用角度濾波的對象的多個屬性

<input type="text" ng-model="vm.filter"> 

<div ng-repeat="tenant in vm.tenants | filter : vm.filter : vm.contains"> 
</div> 

現在我想根據過濾,例如價值篩選租戶找到,如果租戶的名稱中包含的過濾器表達式像

function contains(actual, expected) { 
      return actual.name.indexOf(expected) >= 0; 
     } 

我不明白的是爲什麼我得到一個tenant.name中包含的功能,而不是tenant本身。我知道一個簡單的例子,我可以做類似filter | {name: vm.filter} | vm.contains的事情,但是如果我想根據多個屬性進行過濾(例如姓名,電話等)

回答

1

我不明白的是爲什麼我在包含 函數中獲得tenant.name而不是租戶本身。

發生什麼事是角正在爲比較器提供對象的所有級別以試圖進行深度過濾,即它試圖將您的過濾器與對象中的所有層級匹配。如果你console.log所有的值,你會看到你也得到了完整的對象(在所有的屬性之後)。使這項工作


一種方式是像

... 
<div ng-repeat="tenant in vm.tenants | filter : vm.contains(vm.filter)"> 
... 

然後

... 
contains: function(filter) { 
    return function(tenant) { 
    return tenant.name.indexOf(filter) !== -1; 
    } 
} 
... 

小提琴 - https://jsfiddle.net/81384sd7/

+0

是的,我通過調試發現它正在做深入的比較。有沒有辦法不這樣做?我想在基於對象本身提供的函數中使用我的自定義邏輯,但由於某種原因似乎不可能 –

+0

您可以將過濾函數作爲第一個參數來過濾並直接使用範圍內的vm.filter,或者像https://jsfiddle.net/u9rq7afk/(鍵入'abc'來獲得2個匹配的租戶) – potatopeelings

+0

是的,謝謝,似乎有伎倆,我錯過了表達式參數可以接受函數本身。 –

0

您會想要測試兩者是否存在條件並返回值,如果兩者都存在。事情是這樣的:

function contains(actual, expected) { 
    if (actual.name.indexOf(expected) >= 0 && actual.phone.indexOf(expected) >= 0) { 
    return actual; 
    } 
} 
+0

的問題不在於我無法測試對於裏面的功能而言該角度給我的屬性在對象中,而不是對象本身... –

+0

我糾正瞭解決方案中的錯誤。這聽起來像你需要返回整個'actual'對象而不是單個屬性。 –

+0

實際的對象根本不存在。我預計實際上會是{name:「1」,phone「2」},而我在包含函數中立即得到「1」 –

1

您可以使用一個對象來存儲要應用的過濾器。例如:

$scope.filterBy = { 
    name: "Bob", 
    phone: "07" 
}; 

然後配置字段編輯的過濾器:

<input type="text" ng-model="filterBy.name" /> 
<input type="text" ng-model="filterBy.phone" /> 

然後,只需通過這個對象進行篩選。

<div ng-repeat="tenant in vm.tenants | filter : filterBy"> 

看看我以前的答案,這是非常類似,只是還允許與一鍵手動應用過濾器之前,必須做出選擇:

Applying a angularjs filter after "Apply" button click

希望這有助於。

+0

雖然這可能會工作,如果我創建一個特製的對象與我的字符串重複,但我真的想要相同的字符串與一個對象的各種屬性相匹配。 –

+0

所以你想看看例如tenant.name,tenant.phone等中是否存在「Bob」?本質上如果它匹配任何財產?如果是這樣,我相信這是標準功能,如果你只是通過過濾一個字符串。 – anierzad

+0

是的,這是正確的,但我不想要任何,因爲可能有內部屬性,不相關的屬性等。這就是爲什麼我只是添加了我自己的功能。 –