Filter through multiple properties in AngularJS

Question

I am trying to filter through multiple properties in Angular. I am able to filter through one property easily by using filter:{ title: searchString } but when I try to use multiple properties... it doesn't seem to get any result at all.

What I need to do is:

If John Wayne is passed through.. it shows John Wayne but if only John or only Wayne is passed through... It still shows John Wayne. Similarly for n w since John ends with an n and subTitle starts with a w

My Code:

<input type="text" ng-model="searchString">

<div ng-repeat="arr in arr1 | filter:{ title: searchString, subTitle: searchString }"></div>

$scope.arr1 = [
    {title: 'John',subTitle:'Wayne'}
    {title: 'Barry'}
];

Sajeetharan · Accepted Answer · 2017-01-04 17:14:48Z

1

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

app.controller("ListCtrl", ["$scope",
  function($scope) {
$scope.arr1 = [
    {title: 'John',subTitle:'Wayne'},
    {title: 'Barry'}
];
  }
 
]);

<!DOCTYPE html>
<html>
<head>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
   title:<input type="text" ng-model="criteria.title"> 
   subtitle:<input type="text" ng-model="criteria.subTitle"> <br>
    <div ng-repeat="arr in arr1 |  filter: criteria">{{arr}}</div>
  </div>
</body>
</html>

answered Jan 4, 2017 at 17:14

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

user4756836 Over a year ago

the issue is there is only one input to type not two

Sajeetharan Over a year ago

if you need to filter through multiple properties you need the model for each of those, you cant achieve with one search box. if you use it will acts like free text search

Collectives™ on Stack Overflow

Filter through multiple properties in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related