如何在AngularJs ng-repeat中按数组过滤？

Question

我正在使用 ng-repeat 来显示我的数据。这工作正常。

我的 ng-repeat 结果集中的一个数据字段是一个项目数组。 Example: {x:1, y:[2,3,4]} 我想按数组中的数据过滤数据。我可以轻松地按非数组数据进行过滤，但是当我尝试通过查看数组中的 inisde 来过滤时遇到了麻烦。

这是我的标记 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 $unwind 聚合来分解我的数据，如下所示。

API 文件中的代码：

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

然后我过滤了我正在寻找的用户。将 HTML Angular 标记更改为此

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

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

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

Answer 1

您可以在数组上使用 Angular 内置的 filter 逻辑，但请记住，这不是完全匹配，如果 usrSingle 设置为 3，它将与数组条目 300 匹配，请参见 @987654322 中的示例@。

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