CODEWITHSUNDEEP
javascriptangularjsfilterangularjs-ng-repeat
user3279893
user3279893

Reputation: 99

Filter a list with ng-repeat

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

Upvotes: 1

Views: 1789

Answers (3)

Maher
Maher

Reputation: 2547

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>

Upvotes: 0

NTP
NTP

Reputation: 4448

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

Upvotes: 2

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

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>

Upvotes: 4

Related Questions