AngularJS - 按已应用过滤器的对象属性过滤列表答案

【问题标题】：AngularJS - Filter list by object property that has filter applied to itAngularJS - 按已应用过滤器的对象属性过滤列表
【发布时间】：2015-05-15 13:29:21
【问题描述】：

我想按属性过滤对象列表并使用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>

【问题讨论】：

可能是{{ formattedDuration = (video.duration | formatDate:'HH:mm:ss') }} 会起作用。

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案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

【讨论】：

谢谢，这是一个不错的解决方案。我还将过滤器更改为使用this OR 过滤器仅搜索格式化的值。