How to filter by array in AngularJs ng-repeat?

I use ng-repeat to display my data. This works fine.

One of the data fields in my ng-repeat result set is an array of elements. Example: {x:1, y:[2,3,4]} I would like to filter data by data in an array. I can easily filter data without an array, but I am having problems when I try to filter by viewing inisde in the array.

Here is my markup  ng-repeat = "con in cons | filter: usrSingle.username in con.conPlayerList"

(edited markup to fit my example is better ng-repeat = "con in cons | filter: '3' in con.y")

usrSingle is an area in this controller that I can access. I have no errors, and I can not find examples of this.

Additional code was requested, and it is below. I forgot to mention that this is a MEAN application. I have a MongoDB serving data. I use the REST API for my data calls.

(EDIT) from 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 EDITING) The answer outlined for this is a good solution. But I went the other way. I used mongoDB $ unwinding aggregation to explode my data as shown below.

code from the 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 out the user I was looking for. Change HTML angular markup to

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

to better fit my example, deleting my code would be:

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

+4
source share
1 answer

Angular filter , , 300, usrSingle 3, . Fiddle.

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

, filter: i.e.

(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>
+1

Source: https://habr.com/ru/post/1613912/


All Articles