CODEWITHSUNDEEP
javascriptangularjssearchfilter
Diemauerdk
Diemauerdk

Reputation: 5938

Angularjs - How to make a search filter on multiple variables

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 :)

Upvotes: 0

Views: 3358

Answers (5)

Partha Sarathi Ghosh
Partha Sarathi Ghosh

Reputation: 11576

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>

Upvotes: 0

Harry John
Harry John

Reputation: 63

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">

Upvotes: 0

Kushal
Kushal

Reputation: 1360

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

Upvotes: 0

Chetan Sharma
Chetan Sharma

Reputation: 332

I can share you with idea:-

  1. Try using angularJS Filter's or Service's by using this you can achieve this.
  2. Or Create your own custom filter instead of using inbuilt.

Example:

angular.module('module', [])

.filter('customfiltername', function() {

return function(input) {

return "value";

}; });

Upvotes: 0

Kureb
Kureb

Reputation: 76

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 !

Upvotes: 1

Related Questions