Question

我正在使用Angular做一个最小的搜索功能，其中我使用了filter和ng-repeat在HTML页面上打印表格。

我正在尝试编写一个自定义过滤器，以帮助我通过输入关键字来实现过滤器数据。

<div>
    <label>Filter</label>
    <input ng-model="filterText" type="text" placeholder="Keywords"><br>
    <p><b>Filter by:  </b>{{filterText}}</p>
</div>

<div>
    <tr ng-repeat="x in data | myFilter: filterText">
        <td>{{x.Key.Food}}</td>
        <td>{{x.Key.Color}}</td>
    </tr>
</div>

我有一个海关代码myFilter的脚本代码

app.filter("myFilter",function(){
    return function(input,filterText){
        if(input["Key"]["Food"]==filterText){
            return input;
        }
    }
})

这是我要在此代码上应用的JSON文件的示例

[
    {Key:{Food:"Apple",Color:"Red"},Value:{Amount:"1"}},
    {Key:{Food:"Orange",Color:"Orange"},Value:{Amount:"2"}}
]

我面临的问题是我希望通过调用x in data x将成为JSON示例中的对象。当我访问它时；我可以访问x.Key.Food等。但是，由于未在javascript中定义键对，因此无法解决问题，就像Java中的Foreach一样。

Answer 1

使用custom filters的正确方法是{{ expression | filter }}。

您可以为此使用内置的filter。

<tr ng-repeat="x in data | filter : { Key: { Food: filterText }} : true">
    <td>{{x.Key.Food}}</td>
    <td>{{x.Key.Color}}</td>
</tr>

ng-repeat带HTML表格过滤器

1 个答案: