如何在阵列上使用ng-repeat和filter属性?

时间:2016-02-16 07:38:47

标签: javascript angularjs angularjs-ng-repeat angular-filters

所以我的数据是这样的:

[
    {
        "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以便只有那些userid在myarray中的对象 即只显示a和b?

3 个答案:

答案 0 :(得分:2)

由于您使用角度,您可以使用过滤器执行相同操作。

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

工作代码here

答案 1 :(得分:2)

创建一般过滤器:

  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列表。

答案 2 :(得分:1)

我建议使用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>');