繁体   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