angularjs - AngularJS自定义过滤器过滤项目类型
问题描述
我正在尝试编写一个过滤器,以便它过滤我的项目类型。例如,在 HTML/前端中会有一些下拉项目,如rich
, poor
, , ......当我点击它时应该过滤丰富类型的过滤器very poor
rich
ng-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 #;
};
});
但我没能做到……谁能帮我制作出来?
解决方案
您可以使用内置过滤器“过滤器”:
在你的 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;
}
}
这样您就可以使用多个属性等进行过滤
推荐阅读
- arm64 - 跨工具链构建时 arm-trusted-firmware 编译出错
- c# - 定义新的 ActiveXObject 只返回“错误”
- spring-boot - DispatcherServlet 配置需要包含一个支持这个处理程序的 HandlerAdapter
- php - 使用 PHP 上传 Excel 并根据日期值拆分为多个文件
- arrays - 带有 async/await 的 Mongodb $pull 无法正常工作
- javascript - 如何动态调用文件夹中的视频以循环播放 HTML 中的所有视频?
- python - 使用时间序列算法的降雨预测
- python - 用于两个数据框计算的 Pandas
- rust - 将枚举变体用作函数的这种奇怪语法是什么?
- jquery - 关闭模式时防止下拉菜单关闭