如何在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进行数据调用.

来自角度模块的(EDIT)代码:

// 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 的内置过滤器逻辑，但请记住，这不是完全匹配，如果usrSingle设置为 3，则将与 300 的数组条目匹配，请参阅Fiddle中的示例。

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

要完全匹配数组元素，您可以filter:在控制器上使用谓词函数，即

控制器（小提琴）：

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作为参数传递：

过滤器（小提琴）：

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>