Filter a list with ng-repeat

ng-repeat filter multiple fields
ng-repeat filter function
angularjs filter array
angularjs custom filter
angularjs filter on multiple values of one field
ng-repeat filter not equal
ng-repeat multiple filters
angularjs filter in controller

I have a list as follows

$scope.arrayList = [
   {"name": "test1", "age":2},
   {"name": "test2", "age":4},
   {"name": "test3", "age":2},
   {"name": "test1", "age":4}
]

Initially when the program run whole list should be displayed to the user. then through another dropdown user should be able to select age. then according to the selected age the list should be filtered and display only the relevant data only. Please find the below code

HTML

<div ng-repeat="array in arrayList | filter:filterByAge">{{array}}</div>

<select ng-model="selAge">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

controller

$scope.filterByAge = function(selectedAgeVal)
{
    if($scope.arrayList.age ==selectedAgeVal)
    {
        $scope.arrayList;
        return true;
    }
    else
    {
        return false;
    } 
}

But this code is not working correctly. Initial load of arrayList is not even working properly. Can anybody help me to figure out how to filter within ng-repeat? Thanks in advance


The problem with your custom filter is that, parameter of your custom filter function is a row from your list not selected age value. So changing your custom filter with the following should solve the issue.

  $scope.filterByAge = function(row)
  {
      if(row.age == $scope.selAge)
      {
          return true;
      }
      else
      {
          return false;
      } 
  }

In order to display whole list on start you can add a null check.

 $scope.filterByAge = function(row)
  {
      if($scope.selAge != undefined){
          if(row.age == $scope.selAge)
          {
              return true;
          }
          else
          {
              return false;
          } 
      }
      else{
        return true;
      }
  } 

Demo

filter, Note: If the array contains objects that reference themselves, filtering is not <tr ng-repeat="friend in friends | filter:searchText"> <td>{{friend.name}}</td>  Angularjs ng-repeat filter. As we all know angularjs ng-repeat directive will iterate over collection. Now we will see how to use the filter, filter will selects the subset of items in collection or array and returns a new array. Note: ng-repeat directive will create new object on each iteration.


Your custom filter function should be like this:

$scope.filterByAge = function(selectedAgeVal) {
  return selectedAgeVal.age == $scope.selAge;
}

Or you can just do:

<div ng-repeat="array in arrayList | filter: {age: selAge}">{{array}}</div>

How to filter ng-repeat values according to ng-model using AngularJS, variable is passed as parameter to the GetRowIndex function. It is a regular ng-repeat row, but we have filtered out the results based on the content of object f. The attributes of that object are bound to the input boxes in the first line. Each attribute name will filter in the respective field of the original array. That's neat, but in our case the search or filter only makes sense on the first column.


Always use angular library tools, I put an example for other users, also you have to have unique ages for search in your sample you have 2 age: 2 and 2 age: 4 in your select option you should parse 2 and 4

var app = angular.module("app", []);

app.controller("ctrl", function($scope, $filter) {

  var data = [
    {"name": "test1", "age":2},
    {"name": "test2", "age":4},
    {"name": "test3", "age":2},
    {"name": "test1", "age":4}
   ]
   
   $scope.ages = ["all"];
   
   angular.forEach(data, function(item){
      var exist = $filter("filter")($scope.ages, item.age, true)[0];
      if(angular.isUndefined(exist)){
        $scope.ages.push(item.age)
      }
   })

   $scope.items = data;

   $scope.filter = function(){
       $scope.items = data;
       if($scope.search === "all"){
          $scope.items = data;
          return false;
       }
       var find = $filter("filter")($scope.items, {age: $scope.search}, true);
       console.log($scope.search)
       $scope.items = find;
   }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <select ng-model="search" ng-change="filter()" ng-options="option as option for option in ages"></select>
  
  <ul>
    <li ng-repeat="item in items">
      {{item.name}} | {{item.age}}
    </li>
  </ul>
</div>

AngularJS ng-repeat $index example: Get Index using $index in ng , directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. true if the repeated element is first in the iterator. Chaining filters in an ng-repeat. Tag: angularjs. I had a large list I needed to bind in an ng-repeat and the performance was terrible, so I found this link:


ngRepeat, perfect for making a HTML table, displaying one table row for each object, and one table data for each object property. I have an array of products that I'm repeating over using ng-repeat and am using &lt;div ng-repeat="product in products | filter:by_colour"&gt; to filter these products by colour. The filter is


Angular ng-repeat Directive, The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one. This example uses ngRepeat to display a list of people. In the view, you would just use the filtered list directly: <ul> <li ng-repeat="item in filteredItems">{{item.name}}</li> </ul> Here's a fiddle where this is shown in a more complicated scenario.


Angular Filters, Now you want to iterate over this subset of the list, after clicking an assigned button and change a property on the items that match this filter. To iterate over a  The filter filter selects a subset of an array. The filter filter can only be used on arrays, and it returns an array containing only the matching items. Example. Return the names that contains the letter "i": <div ng-app="myApp" ng-controller="namesCtrl">. <ul>. <li ng-repeat="x in names | filter : 'i'">. { { x }}