2

I want to pass my filter conditions through dropdown menu to ng-repeat

<select class="form-control" ng-model="currentlySelected" ng-change="DropDownChnaged()">
    <option value ="">All</option>
    <option value="| filter : {deleted_at: null}">Active</option>
    <option value="| filter : {deleted_at: '!!'}">Inactive</option>
</select>

View

<tr ng-repeat="user in users {currentlySelected}">

Controller:

$scope.DropDownChnaged = function () {
    $scope.DropDownStatus = $scope.currentlySelected;
    alert(currentlySelected.DropDownChnaged);
};

When I pass set filter manually it works fine but when I try to pass dynamically its not working.

4
  • Is this another attempt to get an answer to your other question? Why not just write your own custom filter and be done with it? Commented Jul 25, 2018 at 20:42
  • If I would know how to do that, why would I ask question again? Commented Jul 25, 2018 at 20:45
  • Search this site for angularjs custom filter. Here is one implementation that accepts multiple filter criteria. You could easily adopt it to your situation. Commented Jul 25, 2018 at 20:47
  • sure thnx....... Commented Jul 25, 2018 at 20:48

3 Answers 3

1

You may have already figured this out, but here is one way you could write a custom filter and then use it to filter your list of users. A custom filter should return a function that takes the collection as the first parameter and the filter criteria as the second parameter (you can add additional parameters if you would like to pass multiple filter criteria). This example uses the built-in .forEach of the collection you pass in. A check at the beginning ensures that both the collection and a filter criteria have been passed to the filter.

angular.module('app', [])
  .filter('userFilter', () => {
    return (userList, filter) => {
      if (!userList || !filter) {
        return userList;
      }
      var out = [];
      userList.forEach((user) => {
        if (filter === 'active') {
          if (user.deleted_at === null) {
            out.push(user);
          }
        } else {
          if (user.deleted_at !== null) {
            out.push(user);
          }
        }
      });
      return out;
    }
  })
  .controller('ctrl', ($scope) => {
    $scope.users = [{
      name: 'John',
      deleted_at: null
    }, {
      name: 'Terry',
      deleted_at: '1/1/2018'
    }, {
      name: 'Joan',
      deleted_at: null
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="form-control" ng-model="currentlySelected">
    <option value="">All</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
  <div>
    <ul>
      <li ng-repeat="user in users | userFilter:currentlySelected">{{user.name}}</li>
    </ul>
  </div>
</div>

Update If you would rather put this in the controller it's slightly different because the filter method will get called for each item and expects a boolean result (true to include the item, false to exclude it). Here is how you would write the $scope method in your controller:

$scope.userFilter = (filter) => {
  return (user) => {
    if(!filter) return true;
    if (filter === 'active') {
      return user.deleted_at === null;
    } else {
      return user.deleted_at !== null;
    }
  }
}

And here's how you would use it in your ng-repeat:

<li ng-repeat="user in users | filter:userFilter(currentlySelected)>{{user.name}}</li>
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, unfortunately still struggling with this issue, with your solution how can I put this custom filter as function in my existing controoler?
@JKLM I've updated the answer to show how to implement in the controller.
0

Try this one <tr ng-repeat="user in users | filter:currentlySelected>

Comments

0

You need to pass the value selected to the function called by ng-change.

Try this:

<select class="form-control" ng-model="currentlySelected" ng-change="DropDownChnaged(currentlySelected)">
             <option value ="">All</option>
             <option value="| filter : {deleted_at: null}">Active</option>
             <option value="| filter : {deleted_at: '!!'}">Inactive</option>
</select>

And in your controller

$scope.DropDownChnaged = function (value) {
        $scope.DropDownStatus = value;
        alert(currentlySelected.DropDownChnaged)
};

And then use 'DropDownStatus' value in the filter:

<tr ng-repeat="user in users {DropDownStatus}">

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.