How can I use multiple filters at a time in angular js

Question

In the code below, when I'm using filter:filterText all the 3 parameters are getting filtered. If I want any of the two parameters to be filtered what expression can I use there?

<div ng-controller="someController">
    <input type="text" ng-model="filterText"></input>
    <ul>
        <li ng-repeat="friend in friends|filter:filterText">
            ({{friend.name}},{{friend.phone}},{{friend.mail}})
        </li>
    </ul>
</div>
<script type="text/javascript">
    var myapp1=angular.module("myApp",[]);
    myapp1.controller("someController",function($scope,$filter){
        $scope.friends=[
            {
                name:"asdf",
                phone:"123456",
                mail:"[email protected]"
            },
            {
                name:"qwe",
                phone:"456887",
                mail:"[email protected]"
            },
            {
                name:"cvb",
                phone:"7786887",
                mail:"[email protected]"
            }
        ];
    });
</script>

boindiil · Accepted Answer · 2014-11-05 07:41:29Z

1

By defining an object for the filter, you can define which fields you want to filter. The following example only searches in the fields name and mail:

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

myapp1.controller("someController",function($scope,$filter){
  $scope.friends=[{
    name:"asdf",
    phone:"123456",
    mail:"[email protected]"
  },
  {
    name:"qwe",
    phone:"456887",
    mail:"[email protected]"
  },
  {
    name:"cvb",
    phone:"7786887",
    mail:"[email protected]"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="someController">
    Name: <input type="text" ng-model="filterName" />
    Email: <input type="text" ng-model="filterEmail" />
    <ul>
        <li ng-repeat="friend in friends|filter:{ name: filterName, mail: filterEmail}">
        ({{friend.name}},{{friend.phone}},{{friend.mail}})
        </li>
    </ul>
</div>

edited Nov 5, 2014 at 7:41

answered Nov 5, 2014 at 7:31

boindiil

5,8652 gold badges31 silver badges31 bronze badges

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

2 Comments

Krzysztof Safjanowski Over a year ago

that version returns element with the same name and mail address

boindiil Over a year ago

thats true, the old version checked if the defined strings is contained in the name and email. I have updated my snipped, so now a string for name and a string for email can be provided

nitin · Accepted Answer · 2014-11-05 07:37:47Z

0

You can do this : 

<input type="text" ng-model="filterName" placeholder="by name"/>
<input type="text" ng-model="filterMail" placeholder="by mail"/>
<ul>
    <li ng-repeat="friend in friends|filter:filterName|| filterMail">
        ({{friend.name}},{{friend.phone}},{{friend.mail}})
    </li>
</ul>

answered Nov 5, 2014 at 7:37

nitin

3,7772 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

How can I use multiple filters at a time in angular js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related