ng-repeat带HTML表格过滤器 [英] ng-repeat with filter for HTML table

问题描述

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

I am using Angular doing a minimal search function where I used filter and ng-repeat to print a table on HTML page.

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

I am trying to write a custom filter that helps me implement filter data by keywords input.

<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的脚本代码

And I have a script code that customs myFilter

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

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

Here is sample of JSON file that I want to apply on this code

[
    {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一样.

The problem I am facing is that I expect that by calling x in data x will be an object from JSON sample. And when I access it; I could access x.Key.Food etc. However, it didn't work out because the key-pair is not defined in javascript not like Foreach in Java.

推荐答案

使用自定义过滤器是{{ expression | filter }}.

您可以为此使用内置的过滤器.

You can use built-in filter for this.

<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表格过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！