The Angular filter does not seem to work as expected when combined with the ng-if

There seems to be a problem with filtering an ng-repeat using a search box.

<li ng-if="searchTab"><input type="text" class="form-control" placeholder="Search"  ng-model="search" >
  </li>

and then in the ng-repeat

<div dir-paginate="saving in savings| orderBy:orderByField:!reverseSort| filter:search | filter:{retailer:filterBy}|itemsPerPage:10" class="list-group-item">

I'm wondering why the filter isn't working when I enter text in the search box.

Edit - It seems that removing the ng-if enables the filter to work. Is there a way to have both functionalities?

javascriptangularjs

Answer №1

When the searchTab value is set to false in the controller's initialization phase, the input div will not be assessed. As a result, the ng-model directive will fail to generate the 'search' variable within the controller scope. Make sure to explicitly declare 'search' as a variable in your controller.

Answer №2

Opt for ng-show over ng-if.

<li ng-show="searchTab"><input type="text" class="form-control" placeholder="Search"  ng-model="search" >
  </li>

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

Create a Rest API and implement server-side rendering concurrently using SailsJs

I am exploring the potential of utilizing the SailsJs framework for nodeJs in order to create an application. Initially, my plan was to construct a REST API in Sails and utilize AngularJs for managing the Front-End. This API would also be beneficial for o ...

javascriptnode.jsangularjsrestsails.js

Update of component triggered only upon double click

I'm encountering an issue with my parent component passing products and their filters down to a subcomponent as state. Whenever I add a filter, I have to double click it for the parent component to rerender with the filtered products. I know this is d ...

javascriptnode.jsreactjsreact-hooks

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

javascripthtmlcssinternet-explorermicrosoft-edge

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Being aware that I may not be the first to inquire about this issue, I find myself working on an Angular 5 application where I need to programmatically open an accordion. Everything seems to function as expected in stackblitz, but unfortunately, I am enco ...

javascriptangulartypescript

Rounding up the cents area using JavaScript

So, imagine this scenario: I'm inputting a dollar amount into a text field using code similar to this: <input type="text" name="qtr-revenue-<?php echo $qtr ?>" id="qtr-revenue-<?php echo $qtr ?>" class=&quo ...

javascriptjquery

An introduction to integrating Paged.js with Vue.js3

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> < ...

javascriptvue.jspagedjs

The error message "Create controller with service — Get... is not a function" indicates that

Within my ASP.NET Boilerplate project, the following code snippet is present: (function () { appModule.controller('augustinum.views.kostenstelle.index', [ '$scope', '$uibModal', 'abp.services.app.kostenstelle ...

javascriptasp.netangularjsangularjs-scopeasp.net-boilerplate

A scheduled task in Node.js set to run every day at 2 AM

My nodejs cron currently runs every 5 hours using the code below: cron.schedule("0 0 */5 * * *") How can I modify it to run daily at 2 AM instead? Thank you ...

javascriptnode.jsexpresscron

Creating tube-like geometry in intervals using three.js

Is there a way in Tube Geometry(Three.js) to plot and render only a portion of the tube at a time, with the option to continue plotting from that point after a set interval or timer? ...

javascriptthree.js

Notes on using touch devices with Angular

My goal is to make my Angular application capable of displaying a footnote on mobile devices when text injected with nativeElement.innerHTML is clicked. I attempted to explain this before but feel that I didn't do it justice, so here's another sh ...

javascriptjqueryhtmlangularionic3

Turn off the "interaction failed" message in discord.js

When an interaction, such as a button click, is left unanswered, Discord will show "interaction failed" in the client. The expected action: inter.reply('stuff') My preferred action: inter.channel.send('stuff') I am not receiving an e ...

javascriptnode.jsdiscorddiscord.js

Using Node.js to Insert Data into MySQL

I recently started experimenting with node.js and decided to use node-mysql for managing connections. Even though I am following the basic instructions from the github page, I am unable to establish a simple connection successfully. var mysql = require(& ...

javascriptmysqlnode.js

Retrieving the current day integer from a fullcalendar rendering in JavaScript and utilizing it as an array key

I am currently working on rendering a full calendar and I would like each cell to be displayed in a different color based on an array that contains color values for each day of the month. The array is retrieved in JSON format. Here is an example JSON arra ...

javascriptphparraysjsonfullcalendar

In Angular, the semi-colon character remains unencoded when included in a URL

We require a semi-colon character to be encoded in our URL parameter, but unfortunately Angular does not encode this character for us. The resource we are utilizing appears as follows: app.factory('TestResource', ['$resource', functio ...

angularjs

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

Tips for navigating an Angular JS web application

I am currently attempting to crawl a web application that presents login as the initial obstacle, and is constructed using AngularJS. My approach involved employing Scrapy and Selenium for crawling the website; however, I encountered an issue with the logi ...

pythonangularjsseleniumweb-crawlerscrapy

Could anyone please provide advice on how to resolve the issue I encountered when trying to make Post and get Http method calls using protractor?

I am currently facing an issue while trying to make a GET API request using protractor. The challenge lies in using the bearer token generated from a previous POST response in the headers of the GET request. Although I have successfully executed the POST r ...

javascriptapiauthenticationautomationprotractor

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

javascriptnode.jsasynchronouspostmansettimeout

Tips for adding a CSS class to an HTML element on-the-fly

As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...

javascripthtmlcssangularjs

Why isn't the page being redirected when attempting to use JavaScript with window.location and window.location.href?

Currently, I have implemented a login system on my website. The process involves triggering an ajax request to a designated PHP script upon the user clicking the submit button. This script is responsible for logging in the user and responding with the mess ...

javascriptphphtmlajaxhttp-redirect