Question

我想在AngularJS中使用ng-repeat指令和自定义过滤器来打印表格。

假设我有以下数据

[
{
    "Key":{
        "Name":"Paul",
        "Age":"18"
     },
    "Info":{
        "Gender":"M"
     }
},
{
    "Key":{
        "Name":"John",
        "Age":"19"
    },
    "Info":{
        "Gender":"M"
    }
},
{
    "Key":{
        "Name":"Jane",
        "Age":"17"
    },
    "Info":{
        "Gender":"F"
    }
}
]

我希望通过使用ng-repeat和filter，可以通过Name或其他选项过滤掉。所以我尝试了：

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

我的自定义过滤器脚本在这里：

myApp.filter("myFilter",function(){
    return function(input, filterText){
        if(input.Key.Name == filterText){
            return input;
        }
    }
})

我不断收到来自控制台的错误消息，提示名称未定义。我同样有访问对象数组Javascript的问题。我已经设置了有关JSON文件输入$scope.data的信息。
filterText将是Name的过滤器关键字。

Answer 1

首先，您的模板中缺少表标签。您可以使用嵌套属性“名称”进行过滤，而无需使用这样的自定义过滤器：

<table>
    <tr ng-repeat="x in data | filter: { Key: {Name: filterText} }">
        <td>{{x.Key.Name}}</td>
        <td>{{x.Key.Age}}</td>
    </tr>
</table>

检查工作示例：jsfiddle

在带有过滤器的AngularJS中使用ng-repeat打印表

1 个答案: