Kuldeep Daftary Kuldeep Daftary - 1 year ago 203
AngularJS Question

filter multiple fields using single input in AngularJS

I have a JSON object which is as follows

"id": 1,
"firstName": "Jennifer",
"middleName": null,
"lastName": "Aniston",
"address": "New York City",
}, {
"id": 2,
"firstName": "Angelina",
"middleName": null,
"lastName": "Jolie",
"address": "Beverley Hills",
}, {
"id": 3,
"firstName": "Emma",
"middleName": null,
"lastName": "Watson",
"address": "London",

I'm populating this data in view using ng-repeat.

<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}

Now I have an input box which I'd like to use to filter these names. I would like to use same input box to filter firstName and then filter lastName and don't filter anything else (eg. address).

<input type="text" placeholder="Filter" ng-model="filterBeauties.firstName">

Any idea how can I achieve it?

Answer Source

Okay So this is what I did to solve it.

I added a new item in json object (using angular.forEach function) and filtered by it.

$scope.list = beauties.query(function(response) {
    angular.forEach(response, function(value, key) {
          var fullName = value.firstName + ' ' + value.lastName;
          $scope.list[key].fullName = fullName;

input box code:

<input type="text" placeholder="Filter" ng-model="filterBeauties.fullName">


<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download