How to assign filters dynamically in AngularJS

Question

I want to filter players with their roles below is the html:

 <li role="presentation" ng-repeat="x in availablePlayers | unique:'PlayerRole'" >
    <a href="#pg" aria-controls="pg" role="tab" data-toggle="tab" ng-model="player.PlayerRole">{{x.PlayerRole}}</a>
</li>

and here is the players listing

 <tr ng-repeat="x in availablePlayers | filter:player">
            <td data-title="POS">{{x.PlayerRole}}</td>
            <td data-title="Player"><a href="#" class="exclamation">{{x.PlayerName}}</a></td>
            <td data-title="OPP">BOS <span class="white-color">vs</span> Cle</td>
            <td data-title="played">6</td>
            <td data-title="FPPG">42.3</td>
            <td data-title="SALARY"><span class="red-color">${{x.Price}}</span></td>
            <td data-title=""><a href="#"><img src="<?php echo $GLOBALS['RootURL'] ?>images/plus.png" alt="plus"/></a></td>
        </tr>

lin · Accepted Answer · 2015-05-18 12:59:40Z

2

You can call a $scope function in filter property. Here is a plunker I made.

<div ng-app>
  <div ng-controller="MainCtrl">

      <hr>
          <a ng-click="setFilter('John');">Set filter "John"</a>
      <hr>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:getFilter()">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

And your scopes:

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];

    $scope.filter = "";

    $scope.getFilter = function () {
        return $scope.filter;
    };  

    $scope.setFilter = function (filter) {
        $scope.filter = filter;
    };
};

edited May 18, 2015 at 12:59

answered May 18, 2015 at 10:02

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

1 Comment

lin Over a year ago

Whats the problem? Please create plunker.

Collectives™ on Stack Overflow

How to assign filters dynamically in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related