首页 > 解决方案 > AngularJS自定义过滤器过滤项目类型

问题描述

我正在尝试编写一个过滤器,以便它过滤我的项目类型。例如,在 HTML/前端中会有一些下拉项目,如rich, poor, , ......当我点击它时应该过滤丰富类型的过滤器very poorrichng-repeat

你来找我的对象:

$scope.names = [
    {name:'Jani',country:'Norway', type: 'RICH'},
    {name:'Carl',country:'Sweden', type: 'POOR'},
    {name:'Margareth',country:'England', type: 'EXTREM POOR'},
    {name:'Hege',country:'Norway', type: 'RICH'},
    {name:'Joe',country:'Denmark', type: 'VERY POOR'},
    {name:'Gustav',country:'Sweden', type: 'VERY POOR'},
    {name:'Birgit',country:'Denmark', type: 'VERY RICH'},
    {name:'Mary',country:'England', type: 'RICH'},
    {name:'Kai',country:'Norway', type: 'POOR'}
    ];

我正在制作的过滤器:

app.filter('typeFilter', function() {
    return function(x) {

        return #;
    };
});

但我没能做到……谁能帮我制作出来?

标签: angularjs

解决方案


您可以使用内置过滤器“过滤器”:

在你的 html 中,使用这个:

Enter your type here:
<input ng-model="type"/>
<div ng-repeat="item in names | filter: type">
  {{item.name}} - {{item.type}}
</div>

您可以使用此过滤器进行更多操作,以供参考: https ://docs.angularjs.org/api/ng/filter/filter

编辑#01

您还可以使用带有过滤器的函数:

HTML

<div ng-repeat="item in names | filter: myFilter">
  {{item.name}} - {{item.type}}
</div>

JS

$scope.myFilter = function(item){
  if (item.type === something){
    return item;
  }
}

这样您就可以使用多个属性等进行过滤


推荐阅读