AngularJS: How to filter data by comparing the search text to only certain members of JSON object?

Question

I want to filter a JSON based only certain members of the JSON object. Here is the fiddler and here is the html code.

<body ng-app="faq" ng-controller="faqDisplay">
   <input ng-model="searchText"></input>
   <div ng-repeat="question in questions|filter:searchText">
      <li>{{question.question}}</li>
   </div>
</body>

Here is the script for that

var faq = angular.module('faq', []);
faq.controller('faqDisplay', function ($scope) {
$scope.questions = [{
    question: "Abc",
    answer: "efg",
    count: "197",
    qname: "q1"
}, {
    question: "FGH",
    answer: "dfs",
    count: "61",
    qname: "q2"
}, {
    question: "IJK",
    answer: "dsds",
    count: "3241",
    qname: "q3"
}];
});

In my fiddle, if you enter in the values I have assigned for count or qname in the input field it will display the questions accordingly but I want it to filter only based on the data members: question and answer (Show the questions only if the searchText contains words/characters which are either in question or answer only).

Can anyone help me with this.

Sachin B. R. · Accepted Answer · 2015-06-18 06:55:55Z

1

You can specify the property you want to filter upon

filter:{question:searchText}

Here is the fiddle

http://jsfiddle.net/knp4fyqq/2/

Here is full documentation

If you want to search on multiple properties, easiest would be to call a function on controller for filter.

For example, create a function in controller like this

 $scope.search = function (row) {
        return (row.question.toLowerCase().indexOf($scope.searchText.toLowerCase() || '') !== -1 || row.answer.toLowerCase().indexOf($scope.searchText.toLowerCase() || '') !== -1);
    };

and update your filter in your binding like this

<body ng-app="faq" ng-controller="faqDisplay">
    <input ng-model="searchText"></input>
    <div ng-repeat="question in questions|filter:search">
        <li>{{question.question}}</li>
    </div>
</body>

And here is the fiddle

http://jsfiddle.net/knp4fyqq/7/

edited Jun 18, 2015 at 6:55

Sachin B. R.

9694 gold badges17 silver badges31 bronze badges

answered Jun 18, 2015 at 4:35

Krishna Veeramachaneni

2,1513 gold badges18 silver badges24 bronze badges

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

1 Comment

Sachin B. R. Over a year ago

I want to filter using two data members(i.e.,question and answer) not one

Collectives™ on Stack Overflow

AngularJS: How to filter data by comparing the search text to only certain members of JSON object?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related