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

Updating the scope variable in an AngularJS directive

Recently delving into Angular, I encountered an issue: I have both a list view and a details view with tags. To facilitate navigating between the two views and loading new elements from a service upon click events, I created a directive. My aim is to also ...

javascripthtmlangularjsangularjs-directive

Check if the user is null using React's useEffect hook and then perform a

I am currently working on implementing a protected route in Next JS. I have included a useEffect to redirect to the sign-in page if there is no user detected. const analytics = () => { const { userLoaded, user, signOut, session, userDetails, subscri ...

javascriptreactjsnext.js

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

The text editor is displaying the following message: Error: Type 'Promise' is not compatible with type 'void | Destructor'. This error occurs when calling checkUserLoggedIn() within the useEffect hook. To resolve this, I tried defin ...

javascripttypescriptpromisetypescript-genericsreact-typescript

Using an array as a data structure for a d3.js tree layout

I'm looking to use d3.js to create a diagram using the tree layout. Instead of the typical flare json structure with hierarchical children, I have an array representing different timesteps that I want to transform into a tree. My plan is to adjust the ...

javascriptjsonlayoutd3.jstree

The initial render of Next.js is not properly loading the CSS files

Encountering an issue with the initial load of the mobile app version; it seems that the CSS of my component covering the page is not loading correctly on the first screen load. However, when resizing to desktop and then switching back to mobile view, the ...

javascriptcssreactjsnext.jsmaterial-ui

React-redux: There is a TypeError in the code, as _this2.props.handleCityChange is not recognized as

I am currently working on integrating a weather widget in react-redux. I keep encountering the error message "TypeError: _this2.props.handleCityChange is not a function" and similar errors for other functions as well. Despite referring to the redux documen ...

javascriptreactjsreduxreact-redux

Incorporate Angular exclusively in pages that are dynamically loaded via ajax requests

<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> </head> <body> <div id="ajax-content-here"> </div> </body> ...

jqueryangularjsangularjs-scope

Dealing with null route parameters for Express applications

I am facing a challenge in handling an empty route parameter when a path is not specified. My intention is to return a new date if the route parameter is empty. However, the server's response so far is: Cannot GET /api/timestamp/ app.get("/api/timest ...

javascriptapiexpress

How does the pound sign (#) signal the beginning of a comment in JavaScript?

I recently ran into an issue while trying to minify JavaScript using Grunt in my NPM project. The error thrown by Uglify was: Warning: Uglification failed. Unexpected character '#'. Line 1 in app/min-libs/node_modules/grunt-contrib-jshint/node_m ...

javascriptcommentsnpmjshintuglifyjs2

Angular mat-select is having difficulty displaying options correctly on mobile devices or devices with narrow widths

In my Angular project, I've encountered an issue with mat-select when viewing options on mobile or low-resolution screens. While the options are still displayed, the text is mysteriously missing. I attempted to set the max width of the mat-option, but ...

javascriptangulartypescriptangular-materialangular6

Generating a hierarchical structure of JSON data through iterative looping

Currently, I am in the process of creating a directive within Angular to assist with field validation. The functionality is working smoothly until it comes time to store the validation result. My objective is to store this information in an object structu ...

javascriptjsonangularjs

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Is it possible to update HTML content using JavaScript or JQuery? I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery? Any suggestions for search keyw ...

javascripthtmljquery

Limiting the display of every item in Angular ngFor

I'm currently working with Angular and I have the following code in my component.html: <div class="card" *ngFor="let item of galleries;" (mouseenter)=" setBackground(item?.image?.fullpath)" (mouseover)="showCount ...

javascripthtmlangular

Having trouble retrieving POST data with the Webextensions API

Looking to retrieve POST data using a Webextensions API on page load. Implemented a background script with the code below: browser.webRequest.onBeforeSendHeaders.addListener( getPostData, { urls: ['<all_urls>'], types: ["main_fr ...

javascriptpostfirefox-addon-webextensions

Exploring the benefits of utilizing EmberJS within the metalsmith.IO platform

Trying to integrate EmberJS into a codesmith.IO project previously built with Angular 1. Feeling like I'm overlooking something simple when it comes to the implementation process. Since I typically use Ember CLI for new app templates, I'm unsure ...

angularjsmodel-view-controllerember.jsember-clicodesmith

What is the process for sending a POST Request to Ghostbin using Node.JS?

I'm attempting to make a POST request to Ghostbin using Node.JS and the request NPM module. Below is the code I have been utilizing: First Try: reqest.post({ url: "https://ghostbin.com/paste/new", text: "test post" }, function (err, res, body) ...

javascriptnode.jspostrequesthttprequest

Angular encountered a SyntaxError due to an unexpected curly brace } character

After spending a lengthy hour trying to troubleshoot this issue, I am at a loss as to why it is not functioning correctly. I have been attempting to showcase a row of images on a webpage using Angular based on data fetched from a json file. Unfortunately, ...

javascriptruby-on-railsangularjscoffeescript

Utilizing Javascript Regular Expressions to extract specified parameters from URLs with specific patterns

I am facing a specific issue with pure vanilla javascript. My task is to extract the values of A, B & C from various URL patterns, excluding any instances where the value is "XX". A, B, and C are static words that can appear in different positions wit ...

javascriptnode.js

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

I am facing an issue with my HTML page where I have Four Links that are supposed to open in separate new windows, each displaying unique content. For instance: Link1 should open in Window 1, Link2 in Window 2, and so on... The problem I'm encounter ...

javascripthtmlbrowser

Choosing multiple options from a list

I am working on a messaging app where users can compose and send messages to contacts. Currently, I am only able to send messages to one contact at a time. My goal is to enable users to select multiple contacts to create group messages. Since I am new to a ...

javascriptangularjsonsen-ui