javascript - AngularJS - 按应用了过滤器的对象属性过滤列表

Question

我想按对象的属性过滤对象列表，并使用了 filter 过滤器。问题在于某些对象属性应用了过滤器，这些过滤器会更改它们的显示格式(请参阅下面代码中的 formatDate 过滤器)，并且 filter 过滤器将使用未格式化的对象属性。

例如:有一个 .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>

Answer 1

您可以使用与用户将看到的内容相对应的额外预格式化属性来扩展数组中的每个对象。然后过滤将用于用户友好的输入。

这是最简单的解决方案，只需要对模板进行少量修改:

<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