AngularJS filtering with multiple conditions

Question

AngularJS filtering with multiple conditions

My ng-repeat list is currently displaying a collection of objects with a filter applied to only show objects inserted today. Here is how it looks:

<div class="row msf-row" 
     ng-repeat="record in recordlist | filter: record.date = dateJson">

While this is working well, I am facing an issue where I want to display records inserted today as well as records that do not have the "arrival" property (as they might have been inserted yesterday but still need to be marked as arrived).

I have attempted the following to achieve this, but I am unsure if it is correct:

<div class="row msf-row" 
     ng-repeat="record in recordlist | 
                filter: record.date = dateJson ||  
                        record.date != dateJson && !record.arrival">

Can someone confirm if this approach is correct?

javascript angularjs

Answer 1

Answer №1

When your markup becomes too complex, it's a sign that it's time for a refactor. Create a function in your controller to handle the desired check:

$scope.shouldDisplay = function(record) {
    return record.date == dateJson ||
           (recode.date != dateJson && !record.arrival);
}

(note: This condition is unnecessary; you can simplify it to):

    return record.date == dateJson || !record.arrival;

Then utilize this function in your filter:

<div class="row msf-row" ng-repeat="record in recordlist | filter:shouldDisplay">

By doing this, you can modify the logic without having to make changes to your view.

Answer 2

When your markup becomes too complex, it's a sign that it's time for a refactor. Create a function in your controller to handle the desired check:

$scope.shouldDisplay = function(record) {
    return record.date == dateJson ||
           (recode.date != dateJson && !record.arrival);
}

(note: This condition is unnecessary; you can simplify it to):

    return record.date == dateJson || !record.arrival;

Then utilize this function in your filter:

<div class="row msf-row" ng-repeat="record in recordlist | filter:shouldDisplay">

By doing this, you can modify the logic without having to make changes to your view.

Answer 3

Answer №2

If you're interested in developing a personalized filter, give this a shot. Assuming that

app = angular.module('yourModuleName', [])

or

app = angular.module('yourModuleName')

(if you've already initialized your module)

<div class="row msf-row" ng-repeat="entry in entrylist | customFilter:dateJson">

app.filter('customFilter', function(){
    return function(entries, dateJson){
        return entries.filter(function(item, index, array){
            return item.date == dateJson || (item.date != dateJson && !item.arrival);
        });
   }
})

Just to be clear: I have not run this code myself.

Answer 4

If you're interested in developing a personalized filter, give this a shot. Assuming that

app = angular.module('yourModuleName', [])

or

app = angular.module('yourModuleName')

(if you've already initialized your module)

<div class="row msf-row" ng-repeat="entry in entrylist | customFilter:dateJson">

app.filter('customFilter', function(){
    return function(entries, dateJson){
        return entries.filter(function(item, index, array){
            return item.date == dateJson || (item.date != dateJson && !item.arrival);
        });
   }
})

Just to be clear: I have not run this code myself.

AngularJS filtering with multiple conditions

Answer №1

Answer №2

Similar questions

What is the best way to centrally align a Card while keeping the text left-aligned?

Issue with ng-model causing incorrect variable binding

Counting radio buttons in AngularJS and handling undefined values when passing parameters

add a hyperlink within a mouse click action

Barba.jS is causing a delay in loading scripts after the page transition

Exploring the Depths of Web Scraping: A Guide to Scraping Within a Scraped Website

As the background image shifts, it gradually grows in size

Is it possible to simultaneously play several one-shot sound effects on mobile web browsers?

Determining the size of an image prior to uploading it in a React

Having trouble getting Vuejs to work when appending an element to Fullcalender

"Error: Command 'npm' is not recognized as a valid internal or external command" encountered while using create-react-app

Display the footer once the user has reached the end of the page by scrolling

Adjust puppeteer window dimensions when running in non-headless mode (not viewport)

AngularJS AJAX request failing due to CORS issue

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

The presence of certain characters is leading to problems in the console

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

Is it possible for Angular.js timer finish event not to trigger data binding correctly?

Adding a class to an element within a React template using JS is not possible

`Creating a new directive within angularJS`