Is there a difference between using ng-if and ng-show?

When my ng-if evaluates to TRUE, I want it to trigger an ng-show="someMethod()".

What is the most effective approach for achieving this?

Would it be advisable to first execute my ng-if, then use ng-init="someMethod()" and within someMethod(), somehow implement a mock of ng-show?

HTML:

<div ng-repeat="(key,item) in foodOptions" ng-class={hidden : item.type != currentSection.type}" >

Subsequently, I intend to use an ng-if to check against a specific condition such as ng-if="item.type === 'pizza'" - which will then trigger ng-show="someMethod()" to filter available dropdowns on the page.

javascriptangularjsangularjs-ng-show

Answer №1

ng-if will only display the element if the condition is true.

Although, you have the option to include multiple conditions in a single expression:

ng-show="item.type == 'pizza' && someMethod()"

However, it's recommended not to place function calls within these conditionals

Answer №2

ng-show is used to evaluate an expression, simply insert your expression into the 

ng-show ="myexpression || myfunction()"
.

If your element or expression is not initialized, it is recommended to use ng-if to ensure that the element only appears once the expression is ready. Check out this link for more information: Initialize expensive element with ng-if then show/hide with ng-show/hide.

<button ng-click='showElement = !showElement; elementInitialized = true'></button>
<div id='myExpensiveElement' ng-if='elementInitialized' ng-show='showElement'> 
...
</div>

It's worth noting that ng-show can immediately follow ng-if, ensuring that it does not take effect until it is properly initialized.

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

Ways to access data stored in the browser's local storage

I have a unique reminder app that stores user inputs in local storage and then displays them on a different page within the app. The process of storing these values in local storage is done through this code snippet: <h2 style="text-align:center;margin ...

javascripthtmllocal-storage

Locate all buttons on the page that have an onclick function attached to them, and

I seem to have run into an issue. I am currently working with Java and WebDriver. My goal is to navigate to , locate the item "ipod", receive 4 results, and then compare them by clicking on the "compare" button beneath each item. However, I am encounteri ...

javascriptjavaseleniumselenium-webdriver

Fixing Cross-Browser Issues with the OnScroll Function

window.onscroll = function() { if( window.XMLHttpRequest ) { var bodyId=document.getElementById('bodymain'); if (bodyId.scrollTop > 187) { //make some div's position fixed } else { //mak ...

javascripthtmlcross-browser

No elements can be located within the iframe as per Cypress's search

I've been attempting to access elements within an iframe using the guidance provided in this article here, but I'm facing an issue where Cypress is unable to locate anything within the iframe. Below is a snippet of my test code: describe('s ...

javascriptreactjsiframecypress

Open in a new tab for enhanced content formatting in Prismic on NextJs

In my Prismic RichText editor, I have included two files (terms and conditions) that I would like to open in a new tab. Unfortunately, Prismic does not offer an option like target _blank for this functionality. I am currently working with NextJs and Tail ...

javascriptnext.jstailwind-cssprismic.iotailwind-in-js

Retrieve a specific JSON object from an array of JSON objects by applying a condition with Restangular

How can I efficiently retrieve a specific playlist with user_id == 1 from a json api (playlists.json) without having to loop through all playlists? This is what I have tried so far: var playlists = Restangular.all('playlists'); playlists.getLi ...

javascriptjsonangularjsrestangular

Iterating through children of the target element using the .each() method in jQuery

Currently, I am looping through the elements and extracting the src attribute from the child element. This is the snippet of HTML code that I am working with: <noscript data-alt="super awesome"> <img src="http://farm9.staticflickr.com/8235/85 ...

javascriptjqueryhtml

Triggering a click event on various instances of a similar element type using the onclick function

Hey there, I'm a newcomer to Javascript. I've been practicing my Javascript skills and trying to replicate something similar to what was achieved in this example: Change Button color onClick My goal is to have this functionality work for multip ...

javascripthtmlcssinputonclick

What steps do I need to take to convert this code from UI Router to the core ngRoute?

After purchasing a template from wrapbootrap, I encountered an issue with the code provided. The theme used the UI Route plugin, which allowed for states, views, and nested views, but unfortunately, it was not compatible with the ADAL Authentication librar ...

javascriptangularjsangular-ui-routerngroute

Troubleshooting the Bootstrap4 NavBar toggle button malfunction

When the window is resized, the buttons on the navbar disappear and the toggle button appears but does not function to display the dropdown menu. The jQuery and other links have been copied from the Bootstrap website. <!DOCTYPE html> {% load static ...

javascripthtmlcssbootstrap-4

Issue encountered with SQL server 2008 due to connection error

My current struggle lies in the connection I am attempting to establish with SQL Server. Unfortunately, whenever I try pressing the period key or entering the server name, I encounter difficulty connecting to SQL Server. ...

javascriptc#asp.net

The clash between mootools and jQuery

I'm facing an issue with a simple form on a page that loads both Mootools and JQuery. Even though JQuery is in no conflict mode, I am encountering problems. There's a form input named "name"-- <input class="required" id="sendname" name="send ...

javascriptjquerymootools

Differences between the application/xml and text/xml MIME types

How can I receive an XML response from a servlet? The servlet returns a content type of "application/xml". When using XmlHttpRequest, I am able to get responseText, but not responseXml. Could this be related to the content type or the request type (I' ...

javascriptxmlajaxhttpget

Using an iframe with THREE.js and WebGlRenderer can result in the domElement's getBoundingClientRect method returning 0

I encountered an issue with my code: ... renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(WIDTH, HEIGHT); ... controls = new TrackballControls(camera, renderer.domElement); Strange behavior occurs when I r ...

javascripthtmlthree.jsonload

Adding a firebase-messaging-sw.js file to Bubble? [UPDATE - file not compatible]

While troubleshooting an error message, I came across a common resolution that suggests adding a firebase-messaging-sw.js file. However, since I am using a bubble HTML element to run the script, I am unsure about the proper way to do this. I attempted usin ...

javascriptfirebasepush-notificationfirebase-cloud-messagingbubble.io

Is npm more similar to Maven or Pip in terms of functionality and usage?

I am curious about the way Javascript's npm handles dependencies in terms of installation. Does it install dependencies on an OS-wide level similar to how Python's pip operates without a virtualenv? Or does npm handle installations more like Java ...

javascriptmavennpmpip

What is the functionality of the save callback in Mongoose?

Currently in the process of learning about Mongoose's save() function for the MEAN stack. This particular function requires a callback as outlined in its API documentation: Model#save([options], [fn]) Saves this document. Parameters: [options] < ...

javascriptnode.jsmongodbmongoosemean-stack

Exploring how to alter state in a child component using a function within the parent component in React

class ParentComponent extends Component { state = { isDialogOpen: false, setStyle: false } handleClose = () => { this.setState({ isDialogOpen: false, setStyle: false }) } handleOpen = () => { this.setState({ isDialogOpen: true ...

javascriptreactjsapireact-reduxstate

Using Ajax to delete item from table

I am currently working on populating a table in the View by clicking on items from a dropdown menu. Fortunately, I already have a script that accomplishes this task. Additionally, I have configured it so that when an item in the table is clicked, it is re ...

javascriptjqueryajaxasp.net-mvc

Unable to loop through a list in JavaScript

<script type="text/javascript"> window.onload = function () { for (var i=0;i<@Model.listsinfo.Count;i++) { $('#work').append($('<div class="col-md-3" id="temp"><label for="tex ...

javascriptasp.net-mvc