AngularJS - 按對象屬性過濾應用了過濾器的列表

我想過濾對象列表的屬性並使用filter過濾器。問題在於某些對象屬性應用了過濾器，這些過濾器會更改它們的顯示格式（請參閱下面的代碼中的formatDate過濾器），並且filter過濾器將使用未格式化的對象屬性。AngularJS - 按對象屬性過濾應用了過濾器的列表

例如：有一個.duration = 150（秒）的視頻將顯示爲00:02:30（因爲formatDate過濾器）。如果用戶搜索「02」，則由於搜索到視頻的.duration屬性並且「02」不匹配150，所以視頻不會被發現。

什麼是通過顯示進行過濾的最簡單方法價值而不是「原始」價值？
我想過爲列表中的每個對象添加一個getDurationFormatted（）函數，並顯示和過濾該屬性，但這會嚴重降低HTML的表現力。

<input ng-model="query"> 

<tr ng-repeat="video in videos | filter:query"> 
    <td> 
     {{ video.name }} 
    </td> 
    <td> 
     <!-- The formatDate filter is used to format the amount of seconds --> 
     {{ video.duration | formatDate:'HH:mm:ss' }} 
    </td> 
</td>

來源

2015-05-15 Drasive

可以是'{{formattedDuration =（video.duration | formatDate：「HH：MM： ss'）}}'會工作。 – YOU

您可以擴展數組中的每個對象，並具有與用戶將看到的內容相對應的其他預格式化屬性。然後過濾將用於用戶友好的輸入。

這是，僅需要較小的模板修改的最簡單的解決方案：

<tr ng-repeat="video in videos | filter:query"> 
    <td> 
     {{ video.name }} 
    </td> 
    <td> 
     <!-- The formatDate filter is used to format the amount of seconds --> 
     {{ video.durationFormatted = (video.duration | formatDate:'HH:mm:ss') }} 
    </td> 
</tr>

演示：http://plnkr.co/edit/7JxdCAJtPamMWsfVSwaN?p=preview

來源

2015-05-15 13:53:15 dfsq

謝謝，這是一個不錯的解決方案。我還更改了過濾器，只使用[this]（https://gist.github.com/drasive/d0a6a5b957e5059ac187）或過濾器搜索格式化的值。 – Drasive

AngularJS - 按對象屬性過濾應用了過濾器的列表

回答

相關問題