Having trouble with the ng-repeat filter not working properly?

Question

Having trouble with the ng-repeat filter not working properly?

I have implemented a filter in an ng-repeat to split a list of Jsons into two sub-lists: one for present-past items and the other for future items. The Json contains a key called "dateFrom," which I use to compare with the current date and determine in which list the item belongs.

However, even though the filter function only relies on the "dateFrom" key for this determination, if I make changes to other keys, the filter behavior also changes.

To demonstrate this issue, I created a quick jsFiddle:

https://jsfiddle.net/1j2p2hbg/1/

The filtering function looks like this:

$scope.isPast = function(item)
{
var now = new Date();
return (item.dateFrom <= now);
}

We have 4 elements in there... 3 with the current date and 1 with a future date. The "isPast" function strictly evaluates the "dateFrom" attribute, yet modifying "keyBoolOne" and "keyBoolTwo" can impact the filter results as well.

Could anyone shed some light on why this is happening?

Many thanks in advance!

javascript angularjs json angularjs-ng-repeat

Answer 1

Answer №1

When it comes to reversing filter polarity in AngularJS, there are certain challenges that arise. While not explicitly outlined in the documentation, one workaround involves using the following syntax:

<div ng-repeat="item in list | filter: '!'+keyBoolOne">

instead of

<div ng-repeat="item in list | filter: !keyBoolOne">

However, in cases where a function is used instead of object attributes, this approach may not be effective.

Option 1

To prevent such errors and improve clarity, consider defining a secondary filter function like so:

$scope.isFuture = function(item){
    return !$scope.isPast(item);
}

Then, apply this function as a filter for your secondary sublist:

<div ng-repeat="item in list | filter: isFuture">

Option 2

If creating additional functions for each filter seems cumbersome, you can create a generic "not" function:

$scope.not = function(filterFunc) {
    return function (item) { 
        return !filterFunc(item); 
    }
};

Utilize this custom function as needed in any sublist:

<div ng-repeat="item in list | filter: not(isPast)">

For more insights, refer to the following resources:

Reversing AngularJS Filter Polarity

Negation in Filters

Answer 2

When it comes to reversing filter polarity in AngularJS, there are certain challenges that arise. While not explicitly outlined in the documentation, one workaround involves using the following syntax:

<div ng-repeat="item in list | filter: '!'+keyBoolOne">

instead of

<div ng-repeat="item in list | filter: !keyBoolOne">

However, in cases where a function is used instead of object attributes, this approach may not be effective.

Option 1

To prevent such errors and improve clarity, consider defining a secondary filter function like so:

$scope.isFuture = function(item){
    return !$scope.isPast(item);
}

Then, apply this function as a filter for your secondary sublist:

<div ng-repeat="item in list | filter: isFuture">

Option 2

If creating additional functions for each filter seems cumbersome, you can create a generic "not" function:

$scope.not = function(filterFunc) {
    return function (item) { 
        return !filterFunc(item); 
    }
};

Utilize this custom function as needed in any sublist:

<div ng-repeat="item in list | filter: not(isPast)">

For more insights, refer to the following resources:

Reversing AngularJS Filter Polarity

Negation in Filters

Having trouble with the ng-repeat filter not working properly?

Answer №1

Option 1

Option 2

Similar questions

Retrieving a particular object/item based on its id using Firebase

Handling Ajax Posts in AngularJS and Symfony2: Dealing with Undefined Index Issue

Can a JavaScript string be converted into a date format for insertion into a SQL database?

Extracting a JSON string from an array of objects - A simple guide

Utilizing JQ to sift through nested objects

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

Incorporating HTML5 transitions into your website

The jQuery .find() method was not able to locate a valid

Using PHP, HTML, and JQuery, dynamically populate text fields upon selection change with values retrieved from PHP

What steps can I take to resolve the issue of item display in the dropdown menu?

Handling null values in JSON using Python

How can we ensure that the second function is executed only after the AJAX click method has finished in Javascript?

Streamline the testing process to ensure compatibility with jQuery version 2.x

Numerous demands for identical searches across various controllers (within the same web page)

Guide to retrieving data from a URL and storing it in a string variable with JavaScript

The isPublic function in mean.js menu seems to be malfunctioning

Maintain current page with HTML form action

I'm encountering a 404 error with Jquery ajax, indicating that the requested resource was not

Which is the ideal choice for Android: Synchronous connection with REST/JSON - Volley, VolleyPlus, or

Save the URL from the newly opened tab into local storage