事先宣告，我不是一個非常有經驗的JS程式員，對AngularJS更是一無所知，但我正試圖對一個使用Angular 1.5.9和Smart Table來顯示資料庫資訊的傳統代碼庫進行一些改進。
我已經閱讀了關于st-search和st-safe-src與st-table等的所有內容，但是我在對我的表格進行過濾時遇到了困難，因為在顯示之前，底層資料會發生轉換。在我的案例中，ng-repeat變數是transaction，它有各種欄位來保存該交易的資訊，例如payee，它保存一個UUID，指向另一個資料庫檔案。在應用程式中，我們使用另一個控制器的函式（dbCtrl.getPayeeName()）來顯示收款人的名字，但基礎資料是UUID。因此，當嘗試使用智能表進行過濾時，它不會對顯示的名稱進行過濾，而只有在將 UUID 輸入到過濾欄位時才會起作用。
一個小例子（去掉了很多中間的部分，但希望足以證明我的困惑）：
<div class="account"
st-table="displayedTransactions"
st-safe-src="transactions"
disable-ng-animate>
...
<div><。 input st-search="payee" placeholder="搜索收款人" class="input-sm form-control" type="搜索"/> </div>>
...
<div ng-repeat="transaction in displayedTransactions track by transaction.id"/span>>
...
< div class="account__td" transaction-field-focus-name="payee">
{{dbCtrl.getPayeeName（transaction.payee）}}
</div>
...
</div>/span> ...
是否有一個相對簡單的方法來讓過濾功能在這樣的情況下發揮作用，即顯示的資料與基礎資料不同？從我在檔案中讀到的內容來看，這似乎需要某種定制的插件，這聽起來像是更多的作業，但我也許能想出辦法。我只是想在走這條路之前，看看我是否錯過了什么明顯的東西。
uj5u.com熱心網友回復：
回過頭來看，我能夠使用st-set-filter屬性來完成我所需要的，正如檔案中嚴格模式過濾部分所描述的，以及laurent在2014年的這個有用答案。
基本上，我在我的HTML模板中的st-set-filter="transactionFilters"中添加了table，以及帶有st-search="prop_to_search"屬性的input標簽。然后在我的應用程式模塊中（我把它放在一個控制器中，不確定這是否完全正確），我定義了一個過濾器，如下面。expression被作為一個物件傳遞到這段代碼中，該物件包含了你輸入的字串值，所以如果你有三個搜索欄位，你會得到一個物件：
{
"prop_to_search1"。"value1",
"prop_to_search2": "value2"。
"prop_to_search3": "value3".
}
在過濾器函式中，我為每個可能進來的屬性寫了一個if塊，然后在那里做我的自定義轉換和模式匹配。這樣，我就可以完全控制最終的匹配，而不是在UUID上搜索，我可以做一些類似$rootScope.dbCtrl.getPayeeName(uuidToSearch)的事情。在我的用例中，這都是可以接受的性能，但我也許可以將這些資料庫查詢作為潛在的優化來快取。
angular.module('myApp'/span>) 。 filter('transactionFilters', function($rootScope, $filter){
return function（array, expression）{
// console.log(`expression is: ${JSON.stringify(expression, null, 4)}`)
return array.filter(function(val, index) {
//在這個函式的背景關系中，`expression`是一個具有的物件。
///每個欄位中輸入的有效過濾器；`val`是資料。
//表示表格的每一行。
//如果這個函式回傳true，該行將與智能表相匹配。
//將顯示它，否則它將被隱藏。
///一次性定義所有的匹配，檢查它們，然后回傳。
//一個大的邏輯和對所有的人。
let accountMatch = true;
let payeeMatch = true;
let categoryMatch = true;
if (expression.account) {
uuidToSearch = val.account //這是賬戶UUID。
strToSearch = $rootScope.dbCtrl.getAccountName（uuidToSearch）。 toLowerCase(); // convert to an account name (We could memoize this to improve performance).
if (strToSearch) {
//如果該帳戶有一個名字（它總是應該的，但為了以防萬一）
//然后檢查該行的帳戶是否包含在過濾器欄位中輸入的文本。
accountMatch = strToSearch.includes(expression.account.toLowerCase()) 。
} else {
accountMatch = false;
}
}
if (expression.payee){
if (val.payee) {
uuidToSearch = val.payee payee
strToSearch = $rootScope.dbCtrl.getPayeeName（uuidToSearch）.toLowerCase（）。
}
if (strToSearch) {
payeeMatch = strToSearch.includes(expression.payee.toLowerCase()) 。
} else {
payeeMatch = false;
}
}
if (expression.category) {
if (val.category) {
strToSearch = $rootScope.dbCtrl.getCategoryName（val. category, val.date）.toLowerCase()
categoryMatch = strToSearch.includes(expression.category.toLowerCase() )
} else {
categoryMatch = false;
}
}
return (
accountMatch &&
payeeMatch &&
categoryMatch
)
})
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/307480.html
標籤：
下一篇：如何在一個會話中只顯示一次標語