簡體   English   中英

AngularJS-按對象屬性過濾列表,已對其應用過濾器

[英]AngularJS - Filter list by object property that has filter applied to it

我想通過對象的屬性來過濾對象列表,並使用filterfilter器。 問題在於某些對象屬性已應用了更改其顯示格式的過濾器(請參閱下面的代碼中的formatDate過濾器),並且filterfilter器將使用未格式化的對象屬性。

例如:有一個視頻,持續時間= 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>

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

這是最簡單的解決方案,僅需對模板進行少量修改:

<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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM