Issue with AngularJS 1.x filter on null columns

I am currently working on a table that has multiple filter fields, one for each column.

<table>
    <tr>
        <th><input type="text" ng-model="search.name"></th>
        <th><input type="text" ng-model="search.phone"></th>
        <th><input type="text" ng-model="search.secret"></th>
        <th><input type="text" ng-model="search.nullcol"></th>
    </tr>
    <tr ng-repeat="user in users | filter:search:strict">
        <td>{{user.name}}</td>
        <td>{{user.phone}}</td>
        <td>{{user.secret}}</td>
        <td>{{user.nullcol}}</td>
    </tr>
</table>

While everything is functioning properly, I have encountered an issue with filtering on a column that contains null values. When I enter a search term and rows with null values disappear as expected, deleting the filter does not restore them.

You can view my code on plunkr here: https://plnkr.co/edit/viMHsxBHI4CjfjWqWjti

Is there a solution to make this work as intended?

Answer №1

The reason for this issue is that when text is entered and then deleted, the evaluation of search.nullcol results in an empty string instead of null.

One possible solution is to utilize the ng-change directive on the nullcol input field to verify if it is an empty string. If it is, then set it to undefined. While I am not certain if this approach aligns with best practices, it does resolve the problem. It was surprising to me that alternative solutions for this peculiar behavior were scarce.

<th><input type="text" ng-model="search.nullcol"  ng-change="checkIfEmpty()"></th>

Include in your JavaScript:

$scope.checkIfEmpty = function(){
   if ($scope.search.nullcol === '') {
      $scope.search.nullcol = undefined;
   } 
}; 

This action will 'reset' the filter if the input field is empty.https://plnkr.co/edit/Uv5DdQ70kGRYZQEwXgrn?p=preview

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

Angular 4 - Automatically scroll to specific list item based on search query input

While I can achieve this with custom JavaScript, I'm curious if Angular 4 has any built-in features that could help. I have a list of checkboxes that are scrollable and a search input above them. My goal is to enable users to quickly jump to a section ...

Is there a way to entirely substitute the app component HTML within an Angular application?

Is there a way to fully replace the HTML content of the app component with another component's HTML? I attempted to use routerLink to show different HTML in the app component (root HTML). Below is the code in the app component HTML file. <div sty ...

Regex for US zip code with an optional format

Searching for a regular expression to validate US zip codes. I have come across multiple examples, but none of them cater to the scenario where the zip code is optional. The input field I am working on does not require a zip code, so it should accept a 5 ...

Disable the ability to select text when double-clicking

Is there a way to prevent text selection on double click while still allowing selection on mouse drag? Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle. UPD: I am not lookin ...

Implementing controller loading with AngularJS through require.js

Having trouble loading the controller to display my view. I've tried writing the controller in the .Route or config file, but still facing issues with loading the controller and route file. How can I use require.js to load the controller and display m ...

There seems to be an issue with Affix functionality in Bootstrap 4 (alpha version)

As detailed in the Bootstrap 3 documentation, I have included the following attributes in a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> Unfortunately, when scrolling down the page with Boots ...

The submission form is being triggered immediately upon the page loading

I have a form on the landing page that sends parameters to Vuex actions. It functions correctly when I click the submit button and redirects me to the next page as expected. However, there seems to be a problem. Whenever I open or refresh the page, the par ...

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Trying out the file loader for processing images and adding them to my build folder. Images within HTML files successfully show up in the build, but the ones from styles do not. I've divided my webpack configuration into two separate files and use t ...

What is the most efficient method for completely updating every field in a MongoDB document?

If I need to update an entire document and overwrite all fields except for _id, which of the three methods is the most efficient in terms of resource consumption: 1. Setting the complete document as the update parameter, passing all fields Example: coll ...

The getJSON function callback is not functioning as expected

I'm new to working with JSON objects and sending them to the browser. I'm having trouble with the callback function not executing properly. I don't see anything in the console. $('#id').change(function(){ $.getJSON('ajax. ...

The select box in Material UI is not displaying the data as expected

I'm currently tackling an issue where, upon every click of an icon, a select box (from material ui) needs to be displayed with a few options inside it. The functionality should show the select box each time the icon is clicked. Here's a brief sum ...

Struggling to send POST request from Bootstrap form to Node server

I am currently in the process of setting up a MEN application using the clean blog bootstrap template available at Recently, I integrated a new post functionality into the template. When testing the form submission, I noticed that I receive the JSON objec ...

Is there a way to change the color of a row in react jsx based on a condition from another row?

I am looking to highlight rows in red color based on a specific condition. If the ratio value in a column is greater than or equal to 0.96, I want to apply this styling. However, I'm unsure about where exactly to insert the necessary lines of code to ...

Searching for elements in Selenium using JavaScript's equivalent of findElement(by.className)

I need to locate an id tag within a class tag on an html page. driver.find_element(By.XPATH, "//div[@class='Content warning']/p").get_attribute("id") https://i.stack.imgur.com/NlU8t.png I successfully accomplished this with ...

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

Update the image on a webpage within a template using AJAX code

I manage a website that utilizes templates. Within the template, there is a main image that I need to replace on specific pages, not throughout the entire site. I am seeking a way to change this main image to a new one on select pages using Ajax. Upon re ...

Decoding JSON data within a Flatlist component in React Native

As a newcomer to React Native, I am currently working on developing an Ecommerce application. For the backend, I am using Woocommerce (Wordpress) and trying to integrate the Woocommerce API response into my React Native App. However, I am facing an issue w ...

Error message: Cannot bring in JavaScript category. TypeError: "class" does not work as a constructor

I'm encountering a strange problem when trying to import my class into another module. Everything works fine when I import the worker module in my start.js file and run the script smoothly. But, the issue arises when the socket module attempts to impo ...

vue mapGetters not fetching data synchronously

Utilizing vuex for state management in my application, I am implementing one-way binding with my form. <script> import { mapGetters } from 'vuex' import store from 'vuex-store' import DataWidget from '../../../../uiCo ...

Delete items from several arrays on a click event in React

I'm working with an array of objects that contain multiple arrays. My goal is to remove the item when a button is clicked, but I keep getting undefined as a result. JSON Data [ { "services": [ { "id": "1b9 ...