When the parent element's CSS property is set to display: none, ng-repeat fails to function

I have a division with a specific class in the CSS named display: none;. When I click on a button, I switch the class using a toggle class feature called 

ng-class="vm.showing ? 'zoomIn' : 'zoomOut'"
. The issue arises when Angular does not populate the ng-repeat element if the style is set to display: none;.

Edit: My intention is to utilize animate.css, so the code should actually be 

ng-class="vm.showing ? 'zoomIn' : 'zoomOut'

Here is the updated code:

<button ng-click="vm.showing = true" type="button">View Panel</button>

<div ng-class="vm.showing ? 'zoomIn' : 'zoomOut'">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

Previous code - no need to consider

<button ng-click="vm.showing = true"type="button">View Panel</button>

<div ng-class="vm.showing ? '' : 'display-none'">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

How can I resolve this issue so that the ng-repeat directive properly populates the repeated element?

javascriptangularjs

Answer №1

Angular offers convenient ng-show and ng-hide directives that are recommended over using display: none:

<div ng-show="vm.showing">
<button ng-click="vm.showing = false" type="button">Close Panel</button>
<div ng-repeat="item in vm.items">
    ...
</div>

Using ng-show results in a cleaner syntax, making it a beneficial choice.

I suspect that the traditional display: none approach may not work due to performance optimizations. By hiding the block with CSS, you're essentially informing Angular not to render it. When you attempt to show it again, Angular doesn't recognize the need for an update because it's only happening in CSS.

Check out this quick tutorial for more insights.

Answer №2

<button ng-click="vm.showing = true" type="button">Open Panel</button>

<div ng-show="vm.showing">
    <button ng-click="vm.showing = false" type="button">Close Panel</button>
    <div ng-repeat="item in vm.items">
        ...
    </div>
</div>

Let's Add Some Animation with animate.css

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

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Ensuring the accuracy of paths in VueJS

I am working on creating specific routes for different users to ensure each user has a tailored experience. For example, if a user is logged in as an admin, they should be directed to '/admin' instead of '/home'. Here's what I&apos ...

javascriptvue.jsvue-routerrouter

Creating a visually appealing label by customizing it according to the child div

Can the label be styled based on whether the input is checked or not using CSS, or do I have to use JavaScript? <label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label> ...

javascriptcss

Removing an item from JSON data using Node.js and Express

Currently, I am attempting to remove an entry from json data. In order to view the data, I utilize the following: app.route('/data/:id') .get((req:Request, res: Response) => { let id = req.params.id; res.status(200).send(projects ...

javascriptnode.jsexpress

The access-control-allow-origin header is failing to receive updates

I need help figuring out how to manually set the Access-origin header. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

javascriptexpress

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

javascriptcsslaravelvue.jslayout

Encountering difficulty in populating table with data using ng-repeat

Snippet: var app = angular.module('myApp', ['smart-table']); app.controller('MyController', function ($scope) { $('#get').click(function ($scope) { $.ajax({ url: & ...

angularjs

Interactive search functionality using jQuery

In the panel I have, I would like to include a search input field that allows users to type in a word. As soon as a match is found, that specific word will be highlighted within the panel while the other information disappears. ...

javascriptjqueryjquery-ui

Skipping certain key-value pairs during the conversion from JSON to Excel Worksheet using the XLSX library in JavaScript

I have a set of objects in JSON format within my JavaScript code and I am looking to transform this data into an Excel worksheet. Within the JSON structure, there are certain key-value pairs that I do not wish to include in the Excel output. For instance, ...

javascriptjsonexcelxlsxworksheet

Disabling the physical back button while the $ionicPopup is displayed

After creating an app using the ionic framework, I encountered a problem with the back button functionality when a pop-up is displayed. Currently, the pop-up closes when I press the physical back button, but I need it to remain open instead. I have attem ...

angularjsionic-framework

Why is AngularJS redirection not retrieving the value from window.localStorage?

After utilizing local storage, I encountered an issue where upon logging in and being redirected to the myprofile page, the local storage value was not loading properly. Instead, I was getting a null value. It wasn't until I manually reloaded the page ...

javascriptangularjs

Angular: utilizing ng-click for dynamic variables

I am currently working on an index page that displays a table of all the 'acts' in my database. What I want to achieve is updating one of the acts without loading a new view, but rather rendering a partial just below that specific act's row ...

angularjs

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

javascripthtmlreactjs

JavaScript SQL results in either a string or an object after executing a

I am facing an issue with the following query: sql = client.query("SELECT * FROM monitormaterialsept", function (err, result, fields) { if (err) throw err; console.log(result); }) I am unsure of what the output of the sql variable is. Is there a ...

javascriptmysqljson

Having trouble retrieving user data that is being passed as a context value using React's useContext

Currently, I am integrating Google login into my React application and facing an issue with passing the response data from Google login (i.e. user data) to other React components using the useContext hook. Unfortunately, I am unable to retrieve the user da ...

javascriptreactjsreact-hooksuse-contextreact-google-login

Guide on creating a cookie in express following a successful API call

Throughout my entire application, I utilize the /api route to conceal the actual API URL and proxy it in express using the following code: // Proxy api calls app.use('/api', function (req, res) { let url = config.API_HOST + req.url // This ret ...

javascriptnode.jsexpresscookies

Ways to activate javascript following a PHP submission?

It's a bit tricky to explain. function m(val){ var element=document.getElementById('othermethod'); if(val=='others') element.style.display='block'; else element.style.display=&apo ...

javascriptphphtml

Having issues with jQuery when trying to select only a single checkbox?

I have created a table with four rows and eight columns, each containing a checkbox. My goal is to allow only one checkbox to be checked per row. I am attempting to achieve this using jQuery. While it works in jsfiddle, I am experiencing difficulties in ge ...

javascriptjqueryhtmlcheckbox

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

javascriptphphtmlmysqlajax

Make the download window appear automatically when downloading a file

How can I use JavaScript/TypeScript to prompt the browser to open the download window? My goal is to give users the ability to rename the file and select the download folder, as most downloads are saved directly in the default location. This is how I curr ...

javascripttypescript