Applying a condition to filter elements using AngularJS

I have created an array in my controller with the following data:

var people = [
        {
            name:"Alice",
            number:'808574629632',
            email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69897809a97989f85979e9f94c7b6919b979f9ad895999b">[email protected]</a>",
            rating:'100',
            id:0,
        },
        {
            name:"Bob",
            number:'808579632',
            email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e302d3f36373c6f1e39333f3732703d3133">[email protected]</a>",
            rating:'100',
            id:1,
        },
        {
            name:"Eve",
            number:'8085729632',
            email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7917180f1518171048391e14181015571a1614">[email protected]</a>",
            rating:'47',
            id:2,
        },
    ];

I am looking to filter out elements with a rating above 50. I have searched extensively for how to filter elements based on a condition using the '|' filter but have not found any useful information.

javascriptangularjsangular-filters

Answer №1

To set a filter expression on your controller, you can declare a function. The documentation for filter explains that a filter can be applied like this: 

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}
. The expression can be a string, object, or function, making it a perfect fit for the use of | filter.

ng-repeat="person in people | filter:ratingGreaterThan50"

$scope.ratingGreaterThan50 = function (item) {
    return item.rating > 50;
}

Here is an example of implementing this custom filter solution:

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

    $scope.ratingGreaterThan50 = function(item) {
      return item.rating > 50;
    }

    $scope.people = [{
      name: "Alice",
      number: '808574629632',
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2947485f454847405a4841404b5d5648">[email protected]</a>",
      rating: '100',
      id: 0,
    }, {
      name: "Bob",
      number: '808579632',
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa94899b929398cbba9d979b9396f99990968b8e869d93">[email protected]</a>",
      rating: '100',
      id: 1,
    }, {
      name: "Eve",
      number: '8085729632',
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147a756278757a7d25547379757d783a737d79">[email protected]</a>",
      rating: '47',
      id: 2,
    }, ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
  <ul>
    <li ng-repeat="person in people | filter:ratingGreaterThan50">{{person.name}}</li>
  </ul>
</div>

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

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

javascriptcssreactjssassstyled-components

Using curly braces when invoking a function from HTML within a Vue.js application

When I call a function, for example on click, it works whether or not I use curly braces. However, I have created a function that triggers a custom event from a child component. I then await this event in a parent component and update the state with my par ...

javascriptfunctionvue.jsstatecurly-braces

KineticJS: Applying a filter to an image does not result in the image having a stroke

Working with KineticJS version 5.1.0 I encountered an issue where a KineticJS image that had a stroke lost the stroke after applying a filter to it. I have created a demo showcasing this problem, which can be viewed on JSFiddle. Here is the code snippet: ...

javascripthtmlkineticjs

Is there a way to invoke a function using a variable in place of its actual name?

Check out my code snippet: $('.click').on('click', function(){ $.ajax({ url : $(this).siblings('a').attr('href'), dataType : 'JSON', success : function (tags) { $ ...

javascriptphpjqueryajax

What could be the reason for receiving a Firebase INVALID_DYNAMIC_LINK_DOMAIN error message?

I'm having trouble implementing email verification in my React website. Whenever I use the sendSignInLinkToEmail function, I encounter the following error: XHRPOSThttps://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=xxxxxxxxxxxxxxxxxxx [ ...

javascriptreactjsjsonfirebasefirebase-authentication

Grunt encounters a hurdle as it attempts to construct the tasks hierarchy for the ng-grid project within Webstorm on a Windows 2012

Having trouble setting up ng-grid project in WebStorm on Windows 2012. I have double-checked NPM and Grunt references. Here are my current Grunt references: Node interpreter: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7&b ...

angularjsgruntjswebstormng-gridangular-ui-grid

What steps should I take to create a .NET/JavaScript login page that works on IE7, Chrome, Mozilla, and Safari browsers?

I am currently dealing with a .NET login page that functions perfectly in Internet Explorer 7. However, my goal is to enhance its compatibility with Chrome, Mozilla, and Safari. The login code behind looks like this: Protected Sub btnLogin_Click(ByVal se ...

javascript.netasp.netvb.net

Encountered an issue setting up Angular Js on Eclipse Mars (64-bit)

I've been struggling for the past two days to set up AngularJS plugins on Eclipse Mars (64 bit), but I keep encountering an error during installation. I'm unsure why this is happening. If anyone has experienced a similar issue before, please sha ...

angularjseclipse

Issue with JavaScript causing circles to form around a parent div

I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...

javascripthtmlarrayscss

Retrieving information in Ionic

Having trouble fetching data from a server in my first ionic application. I keep getting an error that says "Cannot read Property" while trying to attach my code snippet. Here is what my code looks like: import { Component } from '@angular/core' ...

javascriptphpjsonionic-framework

Using React: Implementing conditional checks within the render() method of functional Components

When working with my usual React class Components, I typically perform some checks within the render() method before returning conditional html rendering. However, when using a react functional component, I noticed that there is no render() method availabl ...

javascriptreactjsfunction

Guidelines on Implementing a Three-Level Jquery Accordion Menu

Here is a snippet of jQuery code that I am working with: $(document).ready(function(){ $("#accordion2 h3").click(function(){ //slide up all the link lists $("#accordion2 ul ul").slideUp(); //slide down the link list below the h3 clicked - only ...

javascriptjquerycssmenuaccordion

Replacing text within a paragraph using D3.js

Is it possible to develop a D3 function that can choose a paragraph, delete its content, and replace it with new text? If so, what would be the most effective way to accomplish this? I attempted the following: d3.select("#triggerButton") .on("clic ...

javascripttextd3.jsbuttonclick

Guide on how to receive multiple responses from a single ajax request in PHP

I am in the process of developing a web application that includes a search feature. When a user enters a name to search for, I use an AJAX request to retrieve and display records related to that specific person. However, due to the extensive amount of info ...

javascriptphpajax

Encountering a client-side exception while deploying Next.js with react-google-maps/api on Vercel

Everything was running smoothly with my next js app during development and build phases. However, upon trying to deploy it on Vercel, I encountered an error when calling the page that uses my mapView component: An application error has occurred: a client- ...

javascriptapinext.jsclient-sidereact-google-maps

How can I utilize React to pull information from the Google Taxonomy API?

Seeking assistance with React development, as I am a beginner and looking to retrieve data from this URL and organize it into a tree structure. I not only want to fetch the data but also display it in a tree format. My current code successfully retrieves t ...

javascriptreactjs

Creating a table in React using an object with nested objects

I have 2 different types of JSON APIs and I want to showcase them in a table. The first type has the following structure: data1:[ { "id": 1, "name": "Leanne Graham", " ...

javascriptreactjs

What are the reasons behind professional web designers opting for absolute paths over relative paths (like for CSS, Javascript, images, etc.)?

It used to be my belief that everyone utilized relative paths, like /styles/style.css. However, I've noticed that certain renowned web designers (such as and ) prefer absolute paths (http://example.com/styles/style.css). This begs the question - why ...

javascriptcsspath

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

javascriptjqueryhtmlcssforms

What is the best way to convert modal window functionality from jQuery to native Javascript?

How can I convert this jQuery code for modal windows into native JavaScript while using data attributes? I am having trouble integrating forEach and getAttribute in my code. I usually rely on jQuery, but now I need to switch to native JavaScript. I apprec ...

javascriptjquerypopup