Angularjs - How to make a search filter on multiple variables

Question

I have a search input field that looks like this:

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />

In a div i have an ng-repeat that looks like this:

<div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name' | startFrom: currentPage*pageSize | limitTo: pageSize">

Each item has a Name and a Number. At the moment the search filter only applies to Name because in the ng-model i have written search.Name.

What i want is also to apply the search filter to the variable Number.

I am completely new to angularjs and find it a bit confusing so i have no idea how to do this :)

I have tried something like below:

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name | search.Number" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name, search.Number" />

But none of the above works.

Can someone tell me how i can achieve this?

Thx :)

Kureb · Accepted Answer · 2015-10-09 09:34:56Z

1

Look at this Plunker (not mine)

 $scope.search = function (row) {
        return (angular.lowercase(row.Name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                angular.lowercase(row.Number).indexOf(angular.lowercase($scope.query) || '') !== -1);
    };

The solution is to create your own filter which will applies to both (or more) values !

answered Oct 9, 2015 at 9:34

Kureb

761 silver badge6 bronze badges

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

Comments

Chetan Sharma · Accepted Answer · 2015-10-09 09:35:19Z

0

I can share you with idea:-

Try using angularJS Filter's or Service's by using this you can achieve this.

Or Create your own custom filter instead of using inbuilt.

Example:

angular.module('module', [])

.filter('customfiltername', function() {

return function(input) {

return "value";

}; });

answered Oct 9, 2015 at 9:35

Chetan Sharma

3322 silver badges12 bronze badges

Comments

Kushal · Accepted Answer · 2015-10-09 09:38:16Z

0

Try using it this way

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.$" />

Where "$" means to search in all the keys of the "search" object

Ref : https://docs.angularjs.org/api/ng/filter/filter

answered Oct 9, 2015 at 9:38

Kushal

1,3706 silver badges16 bronze badges

2 Comments

Diemauerdk Over a year ago

I have tried that. The problem with this is that it searches in everything. I only want Name and Number. :)

Kushal Over a year ago

Then i would suggest you to create custom filter as suggested by Chetan

Harry John · Accepted Answer · 2015-10-09 09:41:02Z

0

Try this:

Create two input boxes. One for name and other for number

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Number" />

Now do a filter on the corresponding fields

<div ng-repeat="item in listItemsFiltered = (listItems | filter:{name: search.Name, number: search.Number}) | orderBy:'Name' | startFrom: currentPage*pageSize | limitTo: pageSize">

answered Oct 9, 2015 at 9:41

Harry John

632 silver badges6 bronze badges

Comments

Partha Sarathi Ghosh · Accepted Answer · 2015-10-09 09:45:24Z

You can user only search instated of search.Name.

Look following plunker

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};
  
  $scope.listItems = [
    {'Name': 'abcd', 'Number':120},
    {'Name': 'abc', 'Number':12},
    {'Name': 'abcx', 'Number':23},
    {'Name': 'xyz', 'Number':24}
  ];
  $scope.listItemsFiltered = $scope.listItems;
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <input type="search" placeholder="Search" ng-cloak ng-model="search" />
      
      <div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name'">{{item}}</div>
    </div>
  </body>

</html>

Collectives™ on Stack Overflow

Angularjs - How to make a search filter on multiple variables

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related