Question

I am using ng-repeat to display my data. That is working fine. One of the data fields in my ng-repeat result set is an array of items. Example: {x:1, y:[2,3,4]} I would like to filter by data by data in the array. I can easily filter by the non array data, but I am having trouble when I try to filer by looking inisde in the array. Here is my markup ng-repeat = "con in cons | filter: usrSingle.username in con.conPlayerList" (edited markup to match my example better ng-repeat = "con in cons | filter: '3' in con.y" ) usrSingle is a scope in this controller I can access. I don't get any errors and I can't seem to find examples of this. More code was requested and here it is below. I forgot to mention this is a MEAN app. I have MongoDB serving the data. I use a REST API for my data calls. (EDIT) code from the angular module: // 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(); }); (FINAL EDIT) The answer marked for this is a good solution. But I went another direction. I used the mongoDB $unwind aggregation to explode my data, like below. code from API file: // get .get(function (req, res) { // unwind on the conPlayerList array field Con.aggregate([{ $unwind: "$conPlayerList" }], function (err, cons) { return res.json(cons); }); }) Then I filtered on the user I was looking for. Changing the HTML Angular markup to this ng-repeat="con in cons | filter:{conPlayerList:usrSingle.username}" to match my example better, by removing my specific code, it would be: ng-repeat="con in cons | filter: {y:'3'} "

Answer 1

您可以在阵列上使用Angular的内置filter逻辑，但请记住，这不是完全匹配，如果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>

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

1 个答案: