如何在Angular中过滤ng重复中的元素答案

【问题标题】：How to filter elements in ng repeat in Angular如何在Angular中过滤ng重复中的元素
【发布时间】：2016-11-11 18:27:34
【问题描述】：

我有一个包含名称和值的元素数组，我想在 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

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

【问题讨论】：

请在问题中包含myFilter() 的代码。
function myFilter(name) { return name.substr(-3) != '.00'; }
@Soviut 我现在添加过滤器！
您将过滤器直接分配为不正确的范围变量。您必须使用过滤器工厂方法注册过滤器。

标签： javascript angularjs filter

【解决方案1】：

我在这里做了一个工作示例 --> click here

您犯的最大错误是将过滤器功能保留在控制器中。

我的过滤功能：

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;}});

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

【讨论】：

与我的想法非常相似。这是理想的编码方式，使其更通用。+1 为它。另外添加如何配置 ng-repeat 以供进一步的用户参考。

【解决方案2】：

请替换以下代码

<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'  ">

【讨论】：

这是一个比我更好的主意，但它并不完全有效。因为如果您有例如“extension1.002”，您也会将其删除！您只是在检查名称是否不包含序列“.00”，但我要删除的是以该序列结尾的那些
其实根据你的问题我发现你只需要过滤掉“.00”部分。
那么，您能告诉我如何改正吗？
检查更新的代码是否能帮助您解决问题

【解决方案3】：

我不建议使用标准过滤器属性来执行此特定任务。作为您想法的扩展，我建议编写自定义过滤器来执行此操作。

这里是自定义过滤器的示例代码sn-p

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>

【讨论】：