Creating dynamic filter options in AngularJS

Hi there! I'm working on a small project where I need to implement a search functionality using multiple dynamically generated text fields.

Here is how I am adding the search fields:

<div class="form-group" ng-repeat="choice in choices">
     <button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
     <input type="text" ng-model="choice.name" name="" placeholder="Search criteria">
</div>

Later on, I have a table with an ng-repeat directive and this is the relevant snippet:

    <tr ng-repeat="todo in todos | filter: {filter from all fields}">
     .......
    </tr>

The goal here is to filter the contents of the table using all the dynamically added search fields.

javascriptangularjsangularjs-filter

Answer №1

To handle that, you will need to develop your own custom filter. I have started the process for you.


$scope.customFilter = function(input){
    for(var prop in input){
        for(var i = 0; i < $scope.options.length; i++){
            if(input[prop] == $scope.options[i].value){
                return true;
            }
        }
    }
    return false;
}

You can view the output on jsFiddle here: http://jsfiddle.net/xyz123/

Answer №2

Instead of relying on the filter function, take control and perform the filtering directly within the controller. Check out this updated fiddle for the solution. Simply replace "choice1" with "some" in the first textbox to see the todo item with text "Some stuff" being displayed.

Refer to the excerpt below for the relevant section. For a more detailed explanation, refer to the provided fiddle link.

        $scope.$watch('choices', function(newValue) {
            $scope.DisplayedTodos = [];
            // Implement custom filtering logic here and populate DisplayedTodos array with the filtered items
            // Utilize DisplayedTodos to display todos
        }, true);

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

Utilizing Factory in Angular JS to Isolate Data Requests

Currently, I am utilizing Angular's $http for operations like get, post, put, and delete. This code is residing in my Angular controller at the moment. -- Presently -- The desire now is to switch from using $http to $resource and relocate these data ...

angularjsangular-resourceangular-factory

Steps to implement a fixed toolbar in Chrome while ensuring optimal functionality for all other fixed elements

Currently in the process of developing a Chrome extension, I'm interested in implementing a 60px height toolbar that remains visible at the top of all pages. I've researched various tutorials and articles on using CSS translateX, but encountered ...

javascripthtmlcssgoogle-chrome-extension

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts

The event handler attached to the 'click' event will only be triggered upon the second click

After implementing the script, I noticed a strange behavior. When I click it on load, everything works perfectly. However, when I click it via a dynamically created element, the HTML seems to shift or stretch on the first click before returning to normal. ...

javascriptjqueryhtmliframe

Transmitting a JavaScript file via a Node.js server

I have a NodeJS server that sends a JavaScript file to the client. However, the JavaScript file does not import the libraries it needs on the client side. I load these libraries on the client side before receiving the file. Why is the file unable to find t ...

javascriptnode.jsexpress

Exploring the Integration of Callbacks and Promises in Express.js

I'm currently developing an Express.js application where I am utilizing x-ray as a scraping tool to extract information. For each individual website I scrape, I intend to establish a unique model due to the distinct data and procedures involved in th ...

javascriptnode.jsexpressx-ray

What is the best way to retrieve the updated value following a mutation in Vuex?

In my Vuex module, I have a simple setup for managing a global date object: import moment from 'moment'; const state = { date: moment() } // getters const getters = { date: state => state.date, daysInMonth: state => state.dat ...

javascriptvue.jsgetter-settervuexvuex-modules

Tips for managing player rounds updates

How can I make the number of rounds increase by 1 every time a card is clicked, rather than jumping to 4 and staying there? The initial value is set at 'let rounds = 0;' in my code. <!DOCTYPE html> <html lang="en"> < ...

javascript

Using Selenium Webdriver to open a JavaScript calendar popup window

While testing a basic website, I encountered an issue with the Firefox webdriver not displaying a Javascript calendar window when a button is clicked. Even though the Selenium IDE successfully spawns the window, running the Java code does not result in the ...

javajavascriptseleniumwebdriver

Utilizing AJAX to dynamically populate a dropdown menu with data from a SQL

Having recently delved into the world of ajax, I have a basic understanding of how it works. I've implemented a registration form that dynamically updates the fields for "country, city, and area" using ajax to fetch data from a database. The PHP code ...

javascriptphpjqueryajaxwordpress

Obtaining the most recent commit date through the Github API

I'm in the process of creating a database containing git repositories and I'm curious about how to extract the date of the most recent commit for a repository listed in my database. My experience with the github API is limited, so I'm strug ...

javascriptphpgithub-api

Guide to accessing a method from a separate file with the help of an event bus

I'm working on CreateEntryStepper.vue where I have a button that needs to call a function in CreateEntryStepperImageUpload.vue when pressed. I understand that event busses need to be used, but I am unsure about what exactly needs to be passed and how ...

javascriptvue.js

What steps can be taken to ensure that the onchange event functions properly with radio input

I am facing an issue with my input field as the value changes automatically when an option is selected. However, I want this functionality to also work the same way when a radio input option is selected. How can I modify the code to achieve this? func ...

javascriptjqueryonchange

Incorrectly aligned highlighted labels are appearing on the Kendo chart category axis item labels

My current project involves using the kendo chart to generate charts, and I need specific labels to show up as bold text. To achieve this, I am utilizing the visual method which allows me to customize labels and render them with createVisual(). However, w ...

javascriptangularkendo-uikendo-chart

What is the process for exporting MYSQL data within a specific date range using Laravel?

I have been struggling with a problem that might seem simple to some of you. I am able to filter out data based on a date range and display it in the view. However, I now need to export these searched/filtered results in CSV/Excel format. It would be incr ...

javascriptmysqllaravelexport-to-csvexport-to-excel

Steps for resolving the error message: "An appropriate loader is required to handle this file type, but there are no loaders currently configured to process it."

I am encountering an issue when working with next.js and trying to export a type in a file called index.ts within a third-party package. Module parse failed: Unexpected token (23:7) You may need an appropriate loader to handle this file type, current ...

javascriptreactjstypescriptnext.js

The spawn function in the child_process module throws an error with the code -2, specifically the

Hey there, I'm working on creating an npx command that allows me to run child commands within my package.json bin: "bin": { "malzahar": "./src/bin/malzahar.js" }, Below is the code from my malzahar.js: #! /usr/bin/en ...

javascriptnode.js

Is AngularJS not able to effectively manage the button type "reset"?

I currently have the following code snippet: <form name="editor"> <h2>Create/Update</h2> {{ editor.title.$error.required }} <div ng-class="{ 'has-error': editor.title.$invalid && editor.title.$dirty, &apo ...

javascriptformsangularjsvalidation

Numerous points of interaction within ion-item

Within my ion-list, each ion-item contains a link to navigate to the next page. When tapping on an ion-item, it successfully navigates to the detail page. The problem arises when there is a button inside each ion-item that triggers an action. Tapping on t ...

javascriptangularjsionic-framework

error in Chrome app's webview extension

I have been working on a Chrome app using AngularJS 1.4. I am utilizing different tabs to navigate to various URLs and load them in a webview by using the webview.reload() function which sets its src attribute. For example: <div ng-init="view.init()"&g ...

angularjswebviewgoogle-chrome-app