How to access a custom filter in ng-repeat using AngularJS

I'm working on creating a filter to sort through the items displayed in a table. Specifically, I want to filter out items based on a certain property value that may change depending on user input. I have attempted the following approach and it seems to be functioning correctly. For example, I am looking to display all cities in my array of countries that are not named Stockholm or Gothenburg.

<table>
    <tr ng-repeat="city in cities | filter: name:'!'+'Stockholm' || 'Gothenburg'">
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

However, I would like to achieve this programmatically by using a function to generate the filter, but I am facing difficulties in making it work.

<table>
    <tr ng-repeat="city in cities | filter: getFilter()">
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

$scope.getFilter = function () {
    var filter = {};

    if (something) {
        filter['name'] = '!' + 'Stockholm';
    }

    if (somethingElse) {
        filter['name'] += ' ||' + 'Gothenburg';
    }

    return filter;
}
javascriptangularjsangularjs-filter

Answer №1

When using the filter method, each element is passed through for comparison against a specific condition.

$scope.do_not_display_these_cities = ['Stockholm', 'Gothenburg'];

$scope.applyFilter = function (element) {
    return $scope.do_not_display_these_cities.indexOf(element.name) < 0;
}

Any changes made to the list of cities will be reflected in the filtering process.

Answer №2

In my previous response, I suggested utilizing a Custom Filter provided by AngularJS:

Here is a simple example that demonstrates extracting the first letter of each word, converting it to uppercase, and then filtering the content.

<!DOCTYPE html>

<html ng-app="HelloApp">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<title></title>
</head>
<body ng-controller="HelloCtrl">
<form>
  <input type="text" ng-model="name"/>
</form>
<div>{{name|titlecase}}</div>
<script type="text/javascript">
    // Defining a custom module with a filter
    angular.module('CustomFilterModule', [])
        .filter( 'titlecase', function() {
            return function( input ) {
                return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
            }
        });
    // Angular App setup 
    angular.module('HelloApp', [ 'CustomFilterModule'])
        .controller('HelloCtrl', ['$scope', function($scope){
            $scope.name = '';
        }])
</script>
</body>
</html>

For a live demonstration, you can visit this link:

http://plnkr.co/edit/Ys4pgmKVRcSRFeg8unWr?p=preview

Please note: This example serves as a guideline for using AngularJS custom filters. It may require modifications to suit your specific needs.

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

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

javascriptjquerysvg

Retrieving HTML in Angular

As I delve into the world of Angular, my goal is to retrieve an HTML template from a file using JavaScript without relying on ng-include or any other directives. The challenge lies in not having HTML elements to work with, as all I have is a JavaScript fil ...

angularjs

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Update the text on the button when tasks are in progress in React

I am working on a React project and I need to implement a button that changes its text from Save to Saving... when clicked, and then back to Save once the saving process is complete. My initial approach looks like this: import React from 'react&apos ...

javascriptreactjs

How can strings of dates be arranged in MM/DD/YYYY order?

Is there a correct way to sort these dates in descending order? I've attempted using arr.sort() and arr.sort().reverse(), searched extensively on stack overflow, but still cannot find a solution. Every attempt at sorting them seems to be incorrect. [ ...

javascriptnode.jsdatesorting

Having issues with showing an image from a specified component in a separate file

I am facing an issue where my image is not displaying in the app.js file, even though I have imported it from another file named comp.js. Here is the current code in app.js: import React from 'react'; import TextImg from "./Comp"; impor ...

javascriptreactjsreact-nativereact-props

Automatically selecting the map center while using the Drawing Manager feature for placing markers

My application utilizes the Google Drawing Library. When a user clicks on the Add New Marker Button, the Drawing Manager is activated allowing the user to generate a marker by clicking anywhere on the map. Subsequently, the following listener is executed: ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Is it feasible to style individual letters in a word within an input field?

Is it possible to change the styling of individual letters in an input containing text? For example, if the word 'Test' is in the input, can I make the 'Te' bold while leaving the 'st' regular? Alternatively, perhaps I'd ...

javascriptjquery

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

javascriptjqueryhtmlcssline

Strategies for temporarily storing values within md-list-item in AngularJS

I am attempting to populate a list with items using material icons. The issue is that the values are being added permanently when the material icon is clicked, disregarding the save and discard buttons at the bottom of the card. My goal is to add values te ...

javascriptcssangularjshtml

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

javascriptjqueryhtml

Angular: A guide to binding to the required/ngRequired attribute

There is a directive that may or may not be required, and it can be used in two different ways. <my-foo required></my-foo> or <my-foo ng-required="data.value > 10"></my-foo> Even though require and ngRequire are essentially t ...

javascriptangularjsangularjs-directiverequired

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

I am currently facing a challenge in setting up push notifications using Twilio Conversations and Firebase Cloud Messaging on a Next.js 12 app. The documentation assumes the use of Firebase 8 syntax, but I am working with Firebase 9 in this case. I have be ...

javascriptnext.jsfirebase-cloud-messagingtwilio

Error code 405: The POST method is not compatible with submitting multiple forms using JavaScript code simultaneously

Having multiple forms on a single page that are all submitted using the same JavaScript code presents some challenges. <form class="form" id="cancelchallenge1" method="POST" action="{{action('ChallengeController@cancelChallenge')}}"> <i ...

javascriptphpajaxlaravel

retrieve the previous value from the scope

Attempting to create a copy of an event before any changes are made in order to implement a cancel button, I stored it in the oldValue variable. However, both the event and oldValue variables appear to be empty because they are executed before the event fa ...

jqueryangularjsyeomanangular-fullstack

Focus on selecting the first child <li> element that contains an <a> tag within it

Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...

javascriptjqueryhtml

Values in the list of onClick events are currently not defined

I'm having trouble importing a list component into my form and capturing the onClick event to submit the information. However, every time I click on the list, the data shows up as undefined. What could I be doing incorrectly? Here is the code for my ...

javascriptreactjsmaterial-ui

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

javascripthtmlmobilecordova

Using jQuery and AJAX to dynamically add data to POST parameters

Hello, I have a question that may sound like one from a newbie. I am trying to figure out how to insert a variable into a parameter for a POST request instead of simply writing the number in directly: var x = 3; id=(the var x needs to be here)&appid=4 ...

javascriptjqueryajax

Having trouble with submitting data in an ExpressJS POST request while using mongoose?

As I embark on building my first express.js application, I encounter my initial obstacle. The setup is rather simple. Routes in app.js: app.get('/', routes.index); app.get('/users', user.list); app.get('/products', product. ...

javascriptnode.jsmongodbexpress