Troubleshooting issue with ng-hide in AngularJS when using multiple filters

I'm struggling to implement two filters using ng-hide. Check out this fiddle where I've showcased the issue: http://jsfiddle.net/czPf6/2/ I have a piece of code that dynamically selects which filter to use based on input values from an input box and a select box:

function applySearchFilter() {
        var filterCategory = $scope.filters.cat.toLowerCase();
        //console.log(filterCategory);
        var category = $scope.friend.job.toLowerCase();
        //console.log(category);
        var filter = $scope.filters.name.toLowerCase();
        //console.log(filter);
        var name = $scope.friend.name.toLowerCase();
        console.log(name + " " + category);
        console.log("filter:" + filter + "/category:" + filterCategory);
        if($scope.filters.name == "" && $scope.filters.cat !== ""){
            var isCategory = (filterCategory == category);
            console.log(isCategory + "1st");
            $scope.isExcludedByFilter =  ! isCategory;
            console.log($scope.isExcludedByFilter);
        } else if($scope.filters.name !=="" && $scope.filters.cat == ""){

            var isSubstring = ( name.indexOf( filter ) !== -1 );
            console.log(isSubstring + "2nd");
            $scope.isExcludedByFilter = ! isSubstring;
            console.log($scope.isExcludedByFilter);
        } else if($scope.filters.name !=="" && $scope.filters.cat !==""){

            var isCategory = (filterCategory == category);
            var isSubstring = ( name.indexOf( filter ) !== -1 );
            console.log(isCategory + "3rd");
            console.log(isSubstring + "3rd");
            $scope.isExcludedByFilter = ! isSubstring && ! isCategory;
            console.log($scope.isExcludedByFilter);
        } 

The log statements display the expected values, but the filter only functions when both input fields contain a value. What could be the issue in my implementation?

Answer №1

There seems to be a problem with the isExcludedByFilter function:

$scope.isExcludedByFilter = ! isSubstring || ! isCategory;

I've decided to comment out that line for now.

Changes have been made to the following sections:

} else if($scope.filters.name !=="" && $scope.filters.cat == ""){

    var isSubstring = ( name.indexOf( filter ) !== -1 );
    $scope.isExcludedByFilter = ! isSubstring && ! isCategory; // added && !isCategory

} else if($scope.filters.name !=="" && $scope.filters.cat !==""){

    var isCategory = (filterCategory == category);
    var isSubstring = ( name.indexOf( filter ) !== -1 );

    $scope.isExcludedByFilter = ! isSubstring || ! isCategory; // changed && to ||
}

In addition, I've included the following condition at the end of the above if statement to handle the "Any" filter, which will display all 'friends' in the list:

        } else if($scope.filters.name =="" && $scope.filters.cat == ""){
             $scope.isExcludedByFilter = false;
        }

To view the updated code on jsfiddle platform, click here: http://jsfiddle.net/czPf6/10/

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

What is the method for performing a spelling check on every property within an array of Objects?

I'm working on a program that takes a user input as an argument and then searches for a similar match in an array of objects. The array of objects is retrieved from a database. When the user inputs a name, the search criteria should find objects with ...

Occasional issue with the drop down menu not appearing correctly

I'm experiencing some difficulties with displaying a dropdown menu. Check out the fiddler link for reference: http://jsfiddle.net/GxrSk/ Below is the simplified HTML code: <nav> <ul id="top-menu"> <li class="parent"> ...

Retrieving a numerical value from a constantly changing string

The string is constantly changing. For example: Date15:Month8:Year1990 Is there a way to extract the number 15 without using substring, since the values are always different? I am looking to extract only the number after "Date" and before ":". ...

Effective state management for numerous instances in Vue 3 using Pinia and Element Plus

I've encountered an issue where default objects sharing the same state are causing binding problems, making it difficult to separate them. Each instance needs its own independent state management. Both parent and child components exchange data and int ...

Issue with Jquery code on Mac OS Chrome - it's functional on Windows 10 Chrome though!

Upon clicking the image, it should hide and the YouTube video plays automatically. This functionality works perfectly on Windows 10 but is not functioning on Mac OS or iOS. I am seeking assistance in resolving this issue. I do not own a MacBook, but my c ...

A guide on implementing the stencilFunc method in Three.js

Is it possible to utilize stencilFunc and stencilOp functions within Three.js? I attempted to incorporate code for a stencil test but encountered issues. var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({ antialias: true, st ...

What is the process for dynamically populating a select dropdown based on the selection made in another select dropdown?

I need to dynamically populate the second select box based on the option selected in the first select box. Here's what I have tried so far, but it doesn't seem to be working as expected. HTML: <form id="step1"> <p> Creat ...

Angular 4 or React: Unveiling the Performance Battle between Theory and Reality

While it may seem like the same old comparison between x vs y, what is faster?, I believe my version offers a unique perspective. React and Angular are as different as GTK and Qt (or even more), making comparisons between them futile - one is a versatile f ...

Transferring Python Data to JavaScript using Django

Currently, I am utilizing Django and Apache for webpage serving purposes. In my JavaScript code, I have a data object that contains values to be exhibited in HTML widgets based on the user's selection from a menu. I am looking for a way to derive this ...

AngularJS $q - pausing execution to synchronize all promises

I've encountered a challenge that I haven't been able to solve through online searches. In my project, I am using a library for selecting items and performing custom modifications through callback functions. However, I need to execute some async ...

Guide to incorporating jsTree into Express applications

I just set up jsTree in my project's bower_components folder (following the steps outlined in this post). Here's how my jade template is structured: doctype html html head title= title script(src='/bower_components/jstre ...

Having trouble populating the container with page content using AJAX, PHP, and JS?

Whenever I attempt to use the buttons to change the content, I keep receiving a 'There is no such page!' message. Below is the index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ...

Acquire JSON data structures using Node.js

I've been struggling to find a solution using just keywords - endless scrolling, yet all I can find are tutorials on getting data from JSON structure, rather than getting data structure from JSON. If you're unsure what my end goal is, here are s ...

Can JavaScript be used to dynamically update drop down lists in a gridview?

My gridview has multiple fields including PreviousPoints, GainedPoints, and TotalPoints. In edit mode, PreviousPoints is not editable, GainedPoints is a dropdown list, and TotalPoints is also a dropdown list. Whenever the selected value in GainedPoints ch ...

Is there a way to change the domain for all relative URLs on an HTML page to a different one that is not its current domain, including in HTML elements and JavaScript HTTP Requests?

I am dealing with a situation where my page contains "domain relative URLs" like ../file/foo or /file/foo within a href attributes, img src attributes, video, audio, web components, js ajax calls, etc. The issue arises when these URLs need to be relative ...

"Apple TV now features an iOS app that allows users to watch YouTube videos

I am interested in developing an iOS application that can play YouTube videos in a UIWebView window. Users should have the option to play the videos directly on their iOS device or stream them via AirPlay to an AppleTV. The content displayed in the UIWebV ...

What is the best way to retrieve a nested element from a JSON object using AngularJS?

Take a look at this Plunkr demonstration that showcases the ng-repeat functionality with a JSON file: Plunkr The code snippet below shows how I am displaying elements from $scope.foodlist: <li ng-repeat="food in foodlist"> ...

Can I render rows and cells in a table using v-for twice in Vue?

I am eager to utilize Vue in order to display a table with rows, while having the cells as a component. I have created a functional example showcasing the desired end result along with some code outlining my approach: HTML <div id="app"> ...

The perplexing simplicity of closure

Currently, I am endeavoring to enhance my knowledge of JavaScript closures. Let's consider the following two scenarios in Node.js: function A(){ console.log(data); //this will result in a null pointer } module.exports = function(data){ re ...

Can Hapi-Joi validate a payload consisting of either an Array of objects or a plain Javascript object?

How can I create a schema to validate payloads for a post call that accepts either a single JS object or an array of objects to be saved in the database? JS object { label: 'label', key: 'key', help_text: 'text' } ...