如何在AngularJs ng repeat中通过数组进行过滤

How to filter by an array in AngularJs ng-repeat?

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

我正在使用ng repeat来显示我的数据。这很好。

我的ng重复结果集中的一个数据字段是一个项数组。Example: {x:1, y:[2,3,4]}我想按数组中的数据进行筛选。我可以很容易地通过非数组数据进行筛选，但当我试图通过在数组中查找iniside来进行筛选时，我遇到了麻烦。

这是我的标记ng-repeat = "con in cons | filter: usrSingle.username in con.conPlayerList"

（编辑标记以匹配我的示例更好的ng-repeat = "con in cons | filter: '3' in con.y"）

usrSingle是我可以访问的控制器中的一个作用域。我没有任何错误，而且我似乎找不到这样的例子。

要求提供更多代码，如下所示。我忘了提这是一个MEAN应用程序。我有MongoDB提供数据。我使用REST API进行数据调用。

角度模块的（编辑）代码：

// call to the api for data
app.factory('usrService', function ($resource) {
return $resource('/api/users', {});
});
// factory to hold user data between controllers
app.factory('usrTracker', function () {
var vUsrProfile = {
    usrSingle: 'usrSingle'
};
return {
    getProperty: function () {
        return vUsrProfile;
    },
    setProperty: function (value) {
        vUsrProfile = value;
    }
};
});
// angular controller
app.controller('usrPageController', function ($scope, usrTracker, conService, postService) {
var usrSingle = usrTracker.getProperty();
$scope.usrSingle = usrSingle;
$scope.cons = conService.query();
$scope.posts = postService.query();
});

（最终版）标记的答案是一个很好的解决方案。但我走了另一个方向。我使用mongoDB$unflow聚合来分解我的数据，如下所示。

API文件中的代码：

// get
.get(function (req, res) {
// unwind on the conPlayerList array field
Con.aggregate([{ $unwind: "$conPlayerList" }], function (err, cons) {
return res.json(cons);
});
})

然后我过滤了我要找的用户。将HTML角度标记更改为此

ng-repeat="con in cons | filter:{conPlayerList:usrSingle.username}"

为了更好地匹配我的示例，通过删除我的特定代码，它将是：

ng-repeat="con in cons | filter: {y:'3'} "

您可以在数组上使用Angular内置的过滤器逻辑，但请记住，这不是完全匹配的，如果usrSingle设置为3，则将与300的数组条目匹配，请参阅Fiddle中的示例。

<div ng-repeat = "con in cons | filter:{y:usrSingle} ">...</div>

要与数组元素精确匹配，可以使用filter:和控制器上的谓词函数，即

控制器（Fiddle）：

app.controller('usrPageController', function ($scope) {
  $scope.filterFn = filterFn;
  $scope.usrSingle = 3;
  $scope.cons = [
      {x:0, y:[1,2,3]},
      {x:1, y:[2,3,4]},
      {x:2, y:[3,4,5]},
      {x:3, y:[4,5,6]},
      {x:4, y:[5,6,7]}
  ];
  function filterFn(con){
    return con.y.indexOf($scope.usrSingle) > -1;
  }
});

视图：

<div ng-repeat = "con in cons | filter:filterFn">...</div>

或者，您可以创建一个自定义过滤器，该过滤器可以在应用程序的其他地方重复使用，并将usrSingle作为参数传入：

过滤器（Fiddle）：

app.filter('customFilter', function() {
  return function(input, value) {
    var result = [];
    input.forEach(function(item){
        if(item.y.indexOf(value) > -1){
            result.push(item);
        }
    });
    return result;
  };
});

视图：

<div ng-repeat = "con in cons | customFilter:usrSingle">...</div>
相关文章：