如何在数组上使用 ng-repeat 和过滤器属性

How do I use ng-repeat and filter properties over an array?

本文关键字：ng-repeat 过滤器 属性 数组      更新时间：2023-09-26

所以我的数据是这样的：

[
    {
        "userid": "a",
        "age": 19,
        "name": "john"
    },
    {
        "userid": "b",
        "age": 119,
        "name": "joy"
    },
    {
        "userid": "b",
        "age": 119,
        "name": "jesse"
    }
]

我的阵列myarray:["a","b"]

ng-重复：

ng-repeat="objects in data
{{objects.age}}

如何使用 ng-filter，以便只有那些用户 ID 在 myarray 中的对象即只显示 A 和 B？

创建常规过滤器：

  angular.module('App')
    .filter("byPropertyInArray", function() {
      return function(objects, propertyName, values) {
        return objects.filter(function(object) {
          return values.indexOf(object[propertyName]) !== -1;
        });
      }
    });

然后在视图中使用它：

<div ng-repeat="object in data | byPropertyInArray:'userid':myarray">
  {{object.age}}
</div>

假设该范围包含作为对象列表的data，myarray作为 id 列表。

由于您使用角度，因此可以使用过滤器执行相同的操作。

app.filter('myCustomFilter', function() {
  return function(items) {
    var arrayToReturn = [];
        ["a", "b"].forEach(function(id){
          //find element with userid a or b
          var f = items.find(function(d){return d.userid == id});
            if(f){
                //on find push that in the arrayToReturn
                arrayToReturn.push(f);
            }
        });
    return arrayToReturn;
  };
});

现在在ng中使用您的过滤器，像这样重复

<li ng-repeat="friend in friends | myCustomFilter">

工作代码在这里

我建议使用它Array#reduce()。

它将数组与结果一起保存，并查找结果集中是否有userid。如果不是，则实际userid被推送到结果。

var data = [{ userid: "a", age: 19, name: "john" }, { userid: "b", age: 119, name: "joy" }, { userid: "b", age: 119, name: "jesse" }],
    filtered = data.reduce(function (r, a) {
        ~r.indexOf(a.userid) || r.push(a.userid);
        return r;
    }, []);
document.write('<pre>' + JSON.stringify(filtered, 0, 4) + '</pre>');

相关文章：