如何在Angular中过滤ng repeat中的元素

How to filter elements in ng repeat in Angular

本文关键字：repeat 元素 ng 过滤 Angular      更新时间：2023-09-26

我有一个包含名称和值的元素数组，我想在ng-repeat标记中对其进行过滤。我的数组有这样的元素:

$scope.extensions = [{
  name: "extension1.00",
  value: 1234587
}, {
  name: "extension1.02",
  value: 665873698742136544
}, {
  name: "extension2.00",
  value: 11
}........ //other elements
]

我的ng-repeat标签如下:

<div ng-repeat = "extension in ( extensions | filter : myFilter(extension.name)  | orderBy: 'name' ) ">

我想做的是编写一个自定义过滤器，只显示名称不以"。00"结尾的元素。因此，在上面的例子中，我应该只看到"extension1.02"，而不是其他两个。

所以，我试着写一个简单的过滤器，只是不显示第一个元素("extension1.00"):

$scope.myFilter = function(name) {
  return function(item) {
    var result = true;
    if (item === "extension1.00") {
      return false;
    } else {
    }
    return result;
  };
};

但它根本不起作用…最后，这是我的代码:https://plnkr.co/edit/8oMCgFJhDaFyXfnz2OzU?p=preview

我试着写我自己的过滤器，但我不知道如何才能实现这一点。你能帮我写那个过滤器吗?谢谢你！

我在这里做了一个工作示例-->点击这里

你犯的最大的错误，就是把过滤器函数放在控制器里面。

我的过滤器功能:

app.filter('myFilter', function(){
 return function(items, str){
  var filtered = [];
  angular.forEach(items, function(item){
    if (item.name.substr(item.name.lastIndexOf('.')+1) !== str){
    filtered.push(item);
  }
});
return filtered;}});

查看codependency的链接…它显示了您可以使用的更多自定义过滤器:)

请替换以下代码

<div ng-repeat = "extension in ( extensions | filter : myFilter(extension.name)  | orderBy: 'name' ) ">


<div ng-repeat = "extension in extensions | filter : {name: '!.00'}  | orderBy: 'name'  ">

还要从控制器中删除myFilter方法现在不需要了

下面的代码将满足您的要求

使用以下代码更改控制器中的myFilter方法

$scope.myFilter = function(extension) {
var extArr = [];
extArr =  extension.name.split(".");
 if(parseInt(extArr[1]) === 0){
  return false; 
}else{
 return true;
}};

在HTML中替换为以下代码

<div ng-repeat = "extension in  extensions | filter : myFilter  | orderBy: 'name'  ">

我不建议使用标准筛选器属性来执行此特定任务。作为你的想法的扩展，我建议你写一个自定义过滤器来做到这一点。

下面是自定义过滤器

的示例代码片段
angular.module("myApp",[]).filter("myFilter", function () {
            return function (data) {
                var myValues = [];
                for (var i = 0; i < data.length; i++) {
                    if (!(data[i]["name"].endsWith(".00"))) {
                        myValues.push(data[i]);
                    }
                }
                return myValues;
            }
        });

按照下面的步骤配置ng-repeat指令。

<div ng-repeat="extension in  extensions | mySampleFilter | orderBy: 'name'">
  {{extension.name}}
</div>
相关文章：