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

问题描述

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

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

<label>过滤器</label><input ng-model="filterText" type="text" placeholder="关键字"><br><p><b>过滤条件:</b>{{filterText}}</p>
<div><tr ng-repeat="x 数据 | myFilter: filterText"><td>{{x.Key.Food}}</td><td>{{x.Key.Color}}</td></tr>

我有一个自定义 myFilter 的脚本代码

app.filter("myFilter",function(){返回函数(输入，过滤器文本){if(input["Key"]["Food"]==filterText){返回输入；}}})

这是我想应用于此代码的 JSON 文件示例

<预><代码>[{Key:{Food:"Apple",Color:"Red"},Value:{Amount:"1"}},{Key:{Food:"Orange",Color:"Orange"},Value:{Amount:"2"}}]

我面临的问题是我希望通过在数据中调用 x x 将是来自 JSON 示例的对象.当我访问它时；我可以访问 x.Key.Food 等.然而，它没有成功，因为密钥对不是在 javascript 中定义的，不像 Java 中的 Foreach.

解决方案

自定义过滤器的正确使用方法 是 {{ 表达式 |过滤器}}.

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

<td>{{x.Key.Food}}</td><td>{{x.Key.Color}}</td></tr>

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>

And I have a script code that customs myFilter

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

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"}}
]

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.

解决方案

The right way to use custom filters is {{ 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屋！