What is the method to implement an invisible filter in AngularJS?

When I enter text into the input field in a list view, it filters my list based on the visible username. For example, typing "pa" will display only one row that matches the filter. However, when I type in the "keyword filter" input field, which is not visible to the user, the filtering does not work. For instance, entering "Angular js" should display "pab" because it contains the keyword "Angular js."

To see the code, visit: http://plnkr.co/edit/TccgJydcZNkXQGpnbbP0?p=preview

// Code snippet

angular.module('myApp', [])
  .controller('myCtrl', function($scope){

  $scope.users = [

    {firstname: 'john', lastname: 'smith',
     keywords: ["HTML", "CSS", "JavaScript", "jQuery", "Photoshop"]
    },
    {firstname: 'pab', lastname: 'due',
     keywords: ["Ruby on Rails", "PostgreSQL", "AngularJS", "Node.js"]
    },
    {firstname: 'bob', lastname: 'rand',
     keywords: ["java", "php", "test", "jira"]
    }

  ];

});

Answer №1

The filter for your ng-repeat is currently not taking into account the keyword input - this step seems to have been overlooked. Make sure to include it in the following way:

<div ng-repeat="user in users | filter:userSearch | filter:{ keywords: keyword }">

Answer №2

If you want both input fields to have the same ng-model, simply add it to the second input as well:

ng-model="userSearch"

<body ng-controller='myCtrl'>
  <div>
    <div>
      <input type="text" placeholder="username search" ng-model="userSearch">
    </div>
    <br>
    <div>
      <input type="text" placeholder="keyword search" ng-model="userSearch">
    </div>
  </div>

You can see the example on Plunker: http://plnkr.co/edit/Nqp45xwrZqPLIWDtjGvQ?p=preview

I hope this solution helps! Best of luck.

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

Dropped down list failing to display JSON data

I created a website where users can easily update their wifi passwords. The important information is stored in the file data/data.json, which includes details like room number, AP name, and password. [ {"Room": "room 1", "AP nam ...

Using ES6 to create a callback function that stores values in a Map

I've been trying to find an answer to this question by searching extensively, but haven't had any luck. Currently, I am developing a React app and faced with the task of storing the state, which happens to be a map, in a local variable. Here is ...

Error: This Service Worker is restricted to secure origins only due to a DOMException

Having trouble implementing this on my website; it keeps showing the following error. Help, please! Service Worker Error DOMException: Only secure origins are allowed. if ('serviceWorker' in navigator && 'PushManager' in wind ...

Concealing content in AngularJS when null or an empty array is detected

I am attempting to use ng-hide to hide a value when it is either null or an empty array (in Firebug, this shows as []). I have successfully hidden the null value using: ng-hide="myData.Address == null" But when I attempt: ng-hide="myData.Address == nul ...

Avoiding Socket IO from timing out when the browser page is inactive or not the focused tab on Google Chrome, Mozilla Firefox, and Safari mobile browsers

I have developed a basic chat application using socket io. The functionality is quite similar to the socket io chat official demo. However, I am facing an issue where Socket io times out on all mobile browsers when the user minimizes the page, opens anothe ...

When a JSON stringified string contains a space-separated value, it can cause the data attribute to break

let dataObject = { "Cast_Code": "NA", "Mat_Code": "xxxx", "Pin_Num": "xxxx", "MatDetail": [ { "Batch_Number": "Patch PA", "Batch_Expiry": "No Expiry", "Batch_Quantity": "xxx", "Return_ ...

There is a single occurrence that happens when you click on a label alongside an

How can I change the number of events triggered when clicking a label without directly selecting the input element? Is there a way to achieve this using CSS only, or is it necessary to use JavaScript like document.querySelector('label input')? ...

What type of response does XHR provide when there is no connection available?

Imagine I launched Google Chrome and its corresponding extension. The extension relies on the XmlHttpRequest object for functionality. However, upon starting the browser, I realized there is no internet connection available. In this scenario, what will t ...

What is the best approach to storing and retrieving special characters ('+<>$") from a textfield into a database using PHP?

I have a form where users can enter a personal message with a subject. The data entered in the textarea is passed to a Javascript/jQuery function, which then sends it to a PHP file for storage in a database. However, I am encountering issues when special c ...

Ways to navigate back to the homepage if a parameter is not detected in Angular's ui-router

I am working with Angular ui-router and have set up the following routes. When navigating to /3872, it successfully displays a user with that ID and the correct template, which is perfect. However, the issue arises when entering an ID that does not exist ...

Determining the size of a custom-typed array in Typescript

Can anyone explain how to find the length of a custom typed array? For example: type TMyArray = IProduct[] interface IProduct { cost: number, name: string, weight: number } So, how can we determine the length in this case: const testArr: TMyArray ...

Struggling to make Reactable work with React Native because of the error "Invariant Violation: View config not found for name input"

After attempting to follow a tutorial on creating tables with React for my React Native app, I consistently encountered errors such as "Invariant Violation: View config not found for name th." Even when trying to run the source code provided in the tutoria ...

Unveiling the Magic Bytes: Extracting the Image File in Multer for Magic Byte Verification in Express.js

Utilizing the fileFilter option within the multer plugin to determine whether an image should be saved on the server or not. Within the fileFilter function, there is a need to verify the magic bytes of these images in order to ensure they are legitimate a ...

Secure your website against XSS attacks with DOMPurify

Currently I am working on resolving a cross-site scripting (XSS) vulnerability using DOMPurify. The issue lies in the URL provided below: https://stage-xyzmysite.com/login/?rUrl=javascript:alert('hi'). In order to create a proof of concept, I am ...

Inquiry regarding delays in updating and retrieving data with Mongoose in Node.js

I recently faced an issue related to the CRUD development process. Whenever I update a property and check the response in Postman, it always shows the previous data. For instance, after clicking send on Postman, it shows "weeks" : "11" instead of "10". Che ...

Tips for avoiding double reservations and creating time slots with nextjs and prisma

Welcome to my NextJS app booking system. As a beginner, I'm exploring how to create a website for simple bookings and have successfully connected it to Netlify. Currently, I can gather booking details such as time and name using Netlify forms. Howeve ...

What is the best way to utilize multiple template urls for a single component in Angular 1.5?

I have successfully implemented a component in the following manner angular.module('moduleName') .component('myComponent', { templateUrl: 'templatePath1.tpl.html', controller: myController, ...

What is the process for patiently waiting for a promise that contains another promise within it to successfully resolve?

As I work on my express app, I encountered an issue where I want to ensure the response is returned only after both the file download and decompression processes are complete. Here's a snippet of the code in question: function downloadObject() { re ...

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...

Utilizing the jQuery UI Date Picker in an AJAX Request

I have a PHP script that generates HTML along with javascript (specifically the DatePicker from jQuery UI). The PHP script is invoked from a main page using jQuery/AJAX. Although all my HTML is displayed correctly, I encounter a console error that reads: ...