Ways to enable selective searching for object data in AngularJS

Question

Ways to enable selective searching for object data in AngularJS

Imagine having an object like this:

"results" : [
      {
         "Item.ad_title" : "Test Phone",
         "System.id" : "29183546",
         "Transaction.price" : "700.00",
         "Owner.phone_number" : "22225987",
         "Publication" : {
            "publication_text" : "bla bla bla "
         },
         "Item.id" : "142",
         "Owner.email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48189858d88a48189855b79">[email protected]</a>",
         "Item.tags" : [
            "tag1",
            "tag2",
            "teg3"
         ]           
      },
]

Next, picture a text input with ng-model="search" and a

ng-repeat="product in products | filter: search"

.

While this setup allows searching through all data, there may be cases where you want to limit the search to specific fields like Item.ad_title, publication.publication_text, Transaction.price, and Item.tags.

Is there a way to instruct Angular to focus the search on these particular fields only?

Edit: The goal is for this to be achieved using a single search input field.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

If you refer to the Angular documentation, you'll find the following code snippet:

<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

In this code, use 'ng-model="search.property"' and specify 'strict' in the filter.

Answer 2

If you refer to the Angular documentation, you'll find the following code snippet:

<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<label>Equality <input type="checkbox" ng-model="strict"></label><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

In this code, use 'ng-model="search.property"' and specify 'strict' in the filter.

Answer 3

Answer №2

The information can be found in the official AngularJS documentation:

For example:

ng-repeat="item in items | filter: {'Category.price': query}"

Answer 4

The information can be found in the official AngularJS documentation:

For example:

ng-repeat="item in items | filter: {'Category.price': query}"

Ways to enable selective searching for object data in AngularJS

Answer №1

Answer №2

Similar questions

Sequential Arrangement of JavaScript Functions

Having issues with sitemap.xml functionality in Next.js post build

Moving pictures using css3 transitions

Creating a dynamic link in Vue JS is a cinch!

Troubleshooting: jQuery unable to locate element within iframe

JSON containing attributes represented by Unicode characters

Prevent scrolling using mousewheel click (auxclick event)

The Instant Search feature falls one keystroke short

Guide on sending a JSON response from an API endpoint in Next.js

What is the best way to transmit data to the server using angular.toJson?

Adjust the starting point for div scrolling

Use AngularJS to extract information from Wikipedia and display it

Selecting objects within a small three.js view

Tips for implementing an OR condition within an ng-repeat loop

Attempting to trigger an action from a Vuex module proves futile as the error message "[vuex] unknown action type" is generated

What is causing my mobile navbar to not collapse when the page loads?

Error: posts.populate does not exist as a function

vue-router: error encountered while attempting to load asynchronous component for rendering

Tips for getting Vue's element-ui validateField() function to function correctly in conjunction with v-if?

When I remove the `return false` statement in my code, my AJAX call executes successfully. However, keeping it in prevents the call from