I am facing an issue with filtering a list of objects based on their properties using the filter filter. The problem arises when certain object properties have filters applied to them that alter their displayed format (such as the formatDate filter in the code snippet below), and the filter filter ends up using the unformatted object properties.
For example, consider a video with a duration of .duration = 150 seconds, which is displayed as '00:02:30' due to the application of the formatDate filter. If a user searches for "02", the video will not be found because the search is happening based on the raw .duration property value of 150, which doesn't match the searched term "02".
Is there a simple way to filter based on the displayed value instead of the raw value?
One solution I thought of involves adding a getDurationFormatted() function to each object in the list and filtering specifically by that property. However, this approach would make the HTML code less expressive.
<input ng-model="query">
<tr ng-repeat="video in videos | filter:query">
<td>
{{ video.name }}
</td>
<td>
<!-- Using the formatDate filter to display formatted duration -->
{{ video.duration | formatDate:'HH:mm:ss' }}
</td>
</td>