How to filter values in ng-repeat using an array variable?

Question

I have some values like

 historyValues =[{
        "hsID": "001",
        "hsType": 1,
        "hsName": "ABC"
    },
{
        "hsID": "002",
        "hsType": 2,
        "hsName": "BCD"
    }
{
        "hsID": "003",
        "hsType": 2,
        "hsName": "CDE"
    }]

I have ng-repeat like below

<div ng-repeat="value in `historyValues` | myFilter: [1,2]">

I have created a myFilter and it is working perfectly when values are given as above, but I want to pass it as a variable like below

<div ng-repeat="value in 'historyValues' | myFilter: filteredArray">

I think Answer to your qn is here. Create a custom filter that accepts multiple values. You Answer — Jins Peter
– Jins Peter, Commented May 2, 2017 at 5:48

Sajeetharan · Accepted Answer · 2017-05-02 05:58:19Z

2

You can create a custom filter which accepts the array as input , something like this,

.filter('selectedTypes', function() {
    return function(historyValues, types) {
        return historyValues.filter(function(historyval) {
            for (var i in historyval.Types) {
                if (types.indexOf(historyval.types[i]) != -1) {
                    return true;
                }
            }
            return false;
        });
    };
})

DEMO

angular.module('myApp', [])
  .filter('selectedTypes', function() {
    return function(historyValues, types) {
      return historyValues.filter(function(historyval) {
        for (var i in historyval.Types) {
          if (types.indexOf(historyval.Types[i]) != -1) {
            return true;
          }
        }
        return false;
      });
    };
  })
  .controller('TestCtrl', function($scope) {
    $scope.types = ['1', '2'];
    $scope.historyValues = [{
        Title: "This is a task title",
        Types: ["1", "3", "2", "5", "6"]
      }, {
        Title: "Another test tag title",
        Types: [ "4", "7"]
      }

    ];
  });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="myApp">
  <ul ng-controller="TestCtrl">
    <li ng-repeat="type in historyValues  | selectedTypes:types">{{ type }}</li>
  </ul>
</body>
</html>

edited May 2, 2017 at 5:58

answered May 2, 2017 at 5:52

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

scary_devil Over a year ago

Thanks for the quick answer @Sajeetharan. But, how can I use the same filter for another set of data. Here you are filtering it for a specified scope variable.

Sajeetharan Over a year ago

you need to pass the data in types variable

scary_devil Over a year ago

Suppose my historyValues changes to some other variable, then should I create another custom filter for that?

Sajeetharan Over a year ago

yes you need to, otherwise created a directive which could accept dynamic input and use the filter there

scary_devil Over a year ago

Your method is working for me, but unable to pass it as a variable. Question is updated.

Suneet Bansal · Accepted Answer · 2017-05-02 06:07:45Z

You will have to write your own custom filter which would take filterType as a second parameter and filter the historyValues based on some logic.

Demo Code is attached below:

<script>

var module = angular.module('main', [])
.controller('mainCntrl', function($scope) {
   $scope.historyValues = [{
     type: 4, 
     val: 'History1'
   }, {
    type: 2,
    val: 'History2'
   }, {
    type: 4,
    val: 'History3'
   }];
})
.filter('myFilter', function() {
  return function(input, exp) {
   var vals = [];

   angular.forEach(input, function(val) {
      if(val.type === exp) {
          vals.push(val);
      }
   });

   return vals; 
  }
})

</script>


<div ng-app="main">

<div ng-controller="mainCntrl">
  <div ng-repeat="item in historyValues | myFilter: 4">
    {{item.val}}
  </div>
</div>

</div>

Sumit Ridhal · Accepted Answer · 2017-05-02 06:59:54Z

You can write a custom filter on an object containing multiple values.

Demo: https://codepen.io/sumitridhal/pen/QvgNKR

HTML

<div class="container">
  <h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'drama'},
          {title:'Sphere', genre:'family'},
          {title:'Sphere', genre:'action'},
          {title:'Sphere', genre:'drama'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.drama" />Drama
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.drama}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>

</div>

JS

angular.module('myFilters', []).
filter('bygenre', function () {
    return function (movies, genres) {
    if(genres){
    let condition = [];
    angular.forEach(genres, function(value, key){
  if(value) condition.push(key);
   });
       console.log(condition);

       let filtered = movies.filter(function(movie) {
        return  condition.indexOf(movie.genre) != -1;
      });

      return filtered;
      } else 
      return [];
    };
});

angular.bootstrap(document, ['myFilters']);

rrd · Accepted Answer · 2017-05-02 07:05:00Z

0

Have you tried multiple arguments in the filter, rather than writing your own filter:

 <div ng-repeat="value in historyValues |
   filter: { filterType: '4', filterType: '5', filterType: '6' }">

answered May 2, 2017 at 7:05

rrd

5,9873 gold badges32 silver badges37 bronze badges

1 Comment

scary_devil Over a year ago

array elements are not static, it is dynamic values.

Collectives™ on Stack Overflow

How to filter values in ng-repeat using an array variable?

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related