AngularJS - 按对象属性筛选列表,该属性已应用筛选器

时间:2015-05-15 13:29:21

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

我希望按其属性过滤对象列表,并使用filter过滤器。问题是某些对象属性具有应用于它们的过滤器,这些过滤器会更改它们的显示格式(请参阅下面的代码中的formatDate过滤器),filter过滤器将使用未格式化的对象属性。

例如:有一个视频,其中.duration = 150(秒),将显示为00:02:30(因为formatDate过滤器)。如果用户搜索" 02",则无法找到视频,因为搜索了视频的.duration属性并且" 02"不匹配150。

按显示值过滤的最简单方法是什么,而不是" raw"值吗
我想到将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>

1 个答案:

答案 0 :(得分:2)

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

这是最简单的解决方案,只需要很少的模板修改:

IEnumerator Test() {
        //Code that displays a message
        yield return StartCoroutine(WaitForKey(KeyCode.Space));
    }

    IEnumerator WaitForKey(KeyCode keyCode)
    {
        while (!Input.GetKeyDown(keyCode))
            yield return null;
    }

    void start(){
        StartCoroutine(Test());
        StartCoroutine(Test());
    }

演示: http://plnkr.co/edit/7JxdCAJtPamMWsfVSwaN?p=preview