What is the way to include an additional filter in an AngularJS search filter?

I currently have a functioning search filter in place that utilizes a search input element:

<input placeholder="Search" type="text" ng-model="search.$"/>

Moreover, I have:

<tr ng-repeat="person in people | filter:search:strict">
  <td>{{ person.name }}</td>
<!-- etc --!>

Although this setup is working as intended, I am interested in incorporating buttons that can filter all individuals based on a specific attribute value without the need for manual input, while still maintaining the functionality of the search filter. The details of the controller and scope are as follows:

var FilteringApp = angular.module('FilteringApp',[]);

FilteringApp.controller('FilteringCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.people = [{"name":"Billy","job":"CEO","stress":"high"},
                     {"name":"Mandy","job":"CTO","stress":"high"},
                     {"name":"Susan","job":"CFO","stress":"high"},
                     {"name":"Michael","job":"CMO","stress":"low"}];
}]);

Explore a demonstration on Plunkr here

Answer №1

If you want to enhance your search functionality, you can easily do so by incorporating filters into the search feature. By setting search.stress as the ng-model for other input fields with desired values, you can refine your search results.

For instance, you can use radio buttons to offer different stress level options:

  <label><input type="radio" value="" ng-model="search.stress">any stress</label><br/>
  <label><input type="radio" value="low" ng-model="search.stress">low stress only</label><br/>
  <label><input type="radio" value="high" ng-model="search.stress">high stress only</label>

With this setup, you can now not only conduct a free text search but also filter based on stress level.

For a demonstration, check out the link here: http://plnkr.co/edit/1MBRoq

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

Iterate through a nested array in JavaScript and extract specific properties by comparing them to another array

Within my code, there is a kids object structured as follows: const kids = { name: 'john', extra: { city: 'London', hobbies: [ { id: 'football', team: &apos ...

The significance of Token Details in Tokbox

I'm currently working on developing a video chat platform that caters to various user roles - some may just observe while others actively participate in calls. I've been exploring the capabilities of the Tokbox Api () which allows metadata to be ...

Encountered an error while web crawling in JavaScript: Error - Connection timeout

I encountered an error while following a tutorial on web crawling using JavaScript. When I execute the script, I receive the following errors: Visiting page https://arstechnica.com/ testcrawl ...

How to disable sorting on the top LI element using jQuery?

I currently have two separate UL elements that are being sorted using the jQuery Sortable plugin. Each UL contains between one and ten LI elements arranged in a list format. $(".sortable").sortable({ connectWith: ".sortable", cancel: '.no-dra ...

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

My JavaScript function is currently filtering strings by removing all HTML tags. However, I have now realized that I need to perform two separate operations: first, replacing all closing tags with <br>, and then removing all opening tags. return Str ...

Challenges with Property Decorators in Angular 6

Hello there, I've been testing out this sample decorator code and encountered an issue that I can't seem to figure out. The error message I received was "cannot read property 'firstname' of undefined". It appears that the 'this&apo ...

hybrid application combining AngularJS with Angular 17 and above versions

I have been attempting to set up a hybrid environment with both AngularJS and Angular 1.7+ running side by side. I diligently followed all the guidelines and even created a custom webpack configuration to bundle my AngularJS and Angular files together. The ...

Using directive to access service values directly

I am in need of utilizing a directive to fetch and display data using ng-repeat from a service. The anticipated result will be <ul>Days <li>Monday</li> <li>Tuesday</li> ... <ul> <ul>Month <li>January</li ...

Maintain the property characteristics (writable, configurable) following the execution of JSON.parse()

Imagine a scenario where an object is created elsewhere and passed to my module. It could have been generated on the server in node.js, or perhaps in a different module where it was then serialized using JSON.stringify() for transmission (especially if it ...

Guide on setting the href value within a $.each loop in AJAX requests

I am struggling with downloading a file within a thread. The issue I'm facing is that I can't set the file name in the href and download attributes, so when I attempt to download it, it shows no file available. However, I did realize that replaci ...

"Encountering difficulties in establishing a new remote connection with IE11 using Protractor and

Issue with protractor conf.js opening the angular website in Internet Explorer 11 When running protractor conf.js, IE11 opens with a different URL instead of the one specified in example_spec.js. Instead of '', it opens '' (where XXXXX ...

Running Docker does not provide a means to access the application

I am currently developing an Express (nodejs) application that is running on port 3000, showcasing a simple hello world, and is hosted on a public github repository. So far, everything is running smoothly and the code itself looks like this: var express ...

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...

Verifying API access with custom settings using the got module

I'm having some trouble with a basic API call that requires authentication using the got library. I tried using the options parameter to pass my username and password, but I keep getting an HTTPerror. Could someone please review my usage of the optio ...

Encountering difficulties when trying to set up popovers in Bootstrap

I'm currently working on enhancing an Angular application developed by someone else. My task involves adding a popover feature. The HTML code is located within an ng-include template and includes the following tag: <p class="filetracker-label" dat ...

Vue.js and the hidden input value that remains unseen

I am currently developing a shopping list application using Vue.js and I was wondering if there is a conventional method to achieve my requirements. My app consists of a list of items with add and delete buttons: https://i.stack.imgur.com/yQfcz.png const ...

Tips for preventing users from entering special characters into input fields

How can I prevent users from entering the # character into an HTML input field? I attempted to use the pattern attribute, but it does not seem to be effective. I included this pattern in my input element: pattern="[^-#]+" I expected that this would disa ...

Is it possible to send an entire HTML table to the server and then update the database table with it?

Recently, I encountered an issue that has me stumped. Suppose I have a database table A with multiple columns and the server (PHP script) renders this data into an HTML table for the web client. Now, the challenge lies in allowing users to add/delete rows ...