Advanced AngularJS custom filtering on ngRepeat objects

Question

I want to achieve the following theoretical code:

VIEW.html

<li ng-repeat="player in players | filter:myCustomFilter(player)">{{player.name}}

CONTROLLER.js

// some theoretical conditional statement that return a boolean
$scope.otherCondition = true;


$scope.myCustomFilter = function(player) {
    return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}

So I want all of my players to be loaded into an Angular model, but I only want to render players into the DOM whose names start with the letter 'A'. When I try and do something like this, my console informs me that player is undefined. Do I need to write a custom filter in order to achieve this (via angular.module().filter())?

orlenko · Accepted Answer · 2013-06-15 02:16:13Z

7

Here's a working fiddle: http://jsfiddle.net/orlenko/jV6DK/

Html code (exactly as Karl Zilles suggested):

<div ng-app>
    <div ng-controller="MyController">
        <h2>Names starting with "A":</h2>
        <ul>
            <li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}</li>
        </ul>
        <h2>All Names:</h2>
        <ul>
            <li ng-repeat="player in players">{{player.name}}</li>
        </ul>
    </div>
</div>

Javascript:

function MyController($scope) {
    $scope.players = [{
        name: 'Arthur'        
    }, {
        name: 'William'
    }, {
        name: 'Bertha'
    }, {
        name: 'Alice'
    }];

    $scope.otherCondition = true;

    $scope.myCustomFilter = function(player) {
        return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
    }
}

Result

answered Jun 15, 2013 at 2:16

orlenko

1,2718 silver badges11 bronze badges

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

1 Comment

Shyamal Parikh Over a year ago

What if we want to pass 1 more parameter to the filter?

Karen Zilles · Accepted Answer · 2013-06-15 00:54:17Z

2

You don't need to pass player to the filter

<li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}

Should work

answered Jun 15, 2013 at 0:54

Karen Zilles

7,6713 gold badges37 silver badges34 bronze badges

Comments

Amir Mog · Accepted Answer · 2017-04-06 20:37:25Z

The answers given are only partially correct, if you need to pass more arguments to the function you would need to create a closure and pass those arguments to the closure as follow:

The 'A' is passed to the closure and player is passed as a part of the context.

HTML:

<div ng-app>
    <div ng-controller="MyController">
        <h2>Names starting with "A":</h2>
        <ul>
            <li ng-repeat="player in players | filter:myCustomFilter('A')">{{player.name}}</li>
        </ul>
        <h2>All Names:</h2>
        <ul>
            <li ng-repeat="player in players">{{player.name}}</li>
        </ul>
    </div>
</div>

JS:

function MyController($scope) {
  $scope.players = [{
    name: 'Arthur'
  }, {
    name: 'William'
  }, {
    name: 'Bertha'
  }, {
    name: 'Alice'
  }];

  $scope.otherCondition = true;

  $scope.myCustomFilter = function(letter) {
    return function(player) {
      var rgxp = new RegExp(letter, "g");
      return player.name.substring(0, 1).match(rgxp) && $scope.otherCondition;
    }
  } 

}

Checkout a working jsfiddle

Collectives™ on Stack Overflow

Advanced AngularJS custom filtering on ngRepeat objects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related