Dealing with undefined variables in Angular using ng-show

There are two directives that are displayed based on the configuration of a variable. This was working visually, but I encountered an issue during acceptance tests. I tried to test whether both directives would be hidden if the <settingElement> had not been clicked to configure the var selected. The test passed for <directiveA>, but failed for <directiveB>, which left me feeling a bit puzzled.

Here is an example snippet of the code:

<settingElement ng-click="selected = trueOrFalse()"></settingElement>

<directiveA ng-show="selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>
javascriptangularjsng-showangularjs-ng-show

Answer №1

A more efficient approach to achieve this could involve defining the variable selected in a common parent element of both components, like so:

<div ng-init="selected = false;">
    <settingElement ng-click="selected = true"></settingElement>

    <directiveA ng-show="selected"></directiveA>
    <directiveB ng-show="!selected"></directiveB>
</div>

An alternative "concise workaround" might look like:

<settingElement ng-click="selected = true"></settingElement>

<directiveA ng-show="!!selected"></directiveA>
<directiveB ng-show="!selected"></directiveB>

Answer №2

The reason might be the activation of an expression with undefined values

consider using 

ng-if ="selected" or ng-show="selected==true"

Answer №3

Achievement unlocked! Sort of, visually the code is functional so instead of checking for isDisplayed, I confirmed that the height and width are both 0... not perfect but it gets the job done.

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

The proxy encountered a TypeError when the trap for the property 'set' returned a falsish value

After migrating my code from using es5 class prototype representation to es6 class representation, I encountered an error. This is the comparison of the code before and after migration: ES5 syntax function RoutingScreen (context) { Object.assign(this, ...

javascriptnode.jsecmascript-6es6-class

I am looking to include the "!important" rule in my animation code

Is it feasible to include !important in animations? I attempted to incorporate it in Angular in the following manner: angular.element(".myClassName").css("margin-left","100px !important"); ...

jqueryangularjscss

What are the available methods for incorporating node.js dependencies into a Python package?

At the moment, I am working with a few Python packages that are not yet published and are used locally. For development purposes, I install these packages on Linux using a Bash script into an activated virtual environment. Here's how I do it: cd /roo ...

javascriptpythonnode.jsnpmpython-packaging

When in contact with an object, transition to the designated destination in aframe

Is there a way in Aframe to automatically teleport the camera back to point 0, 0, 0 once it reaches a distance of 20 spaces away from that location? I am curious if this is a simple task or more complex. Any tips on how I can accomplish this? ...

javascriptthree.jsaframe

Guide on leveraging filter and map functions to modify an object

What is the process to adjust an existing object using map and filter? Two objects are provided below along with the desired output. let a = [ { a: "hi", b: 0 }, { a: "bye", b: 1 }, { a: "seeyou", b: 2 }, ]; let b = { hi ...

javascriptnode.jsarrays

Setting non-reactive data in Vue 2 components: A step-by-step guide

I have an array of categories that is loaded once in the created hook and remains static thereafter. I am rendering these values in a component template. <template> <ul> <li v-for="item in myArray">{{ item }}</li& ...

javascriptvue.jscomponentsvuejs2

Is there a way to implement prototype inheritance without contaminating an object's prototype with unnecessary methods and properties?

I prefer not to clutter the object prototype with all my library's methods. My goal is to keep them hidden inside a namespace property. When attempting to access an object property, if it is undefined, the script will search through the prototype cha ...

javascript

Using Selenium to verify if a JavaScript alert or popup is currently displayed in a web application

I am currently working with some HTML code that looks like this: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> alert("Hello world"); & ...

javascriptjquerypythonselenium

What are the steps to create a DIV table after submitting a form?

I'm having trouble creating a header row for a DIV table using JavaScript (without jQuery). Instead of getting the expected output, I'm getting a row with the array items as headings separated by commas. https://i.sstatic.net/8O5QR.png var ma ...

javascripthtmlcss

The failure within the internal request resulted in the failure of the main request

I develop a Jquery Promise with the following structure: request1() .then(response => {}) .then( () => { request2().done(response => {}) } .fail(err => {}); In the done and fail blocks, I implement code to "unblock" the scre ...

javascriptjquerypromisejquery-deferred

`The functionalities of classList.add and classList.remove aren't behaving as anticipated.`

I'm currently working on a list of items (ul, li) that have a class applied to them which adds a left border and bold highlight when clicked. My goal is to reset the style of the previously clicked item back to its original state when a new item is c ...

javascripthtmlcss

An issue occurred while running the "gulp test" command due to a problem with the 'gulp-tslint-log'

Having issues running gulp on a JHipster generated project. I've already installed all node_modules using npm install and here are my package.json and gulpfile.js: { "name": "myapp", "version": "0.0.0", "description": "Description for myapp", ...

javascriptjsonnode.jsgulp

Move divs on top of each other while scrolling through a webpage

I am working on an HTML-page that contains multiple DIVs and a function called 'fullscreenCSS' that ensures the DIVs take up the entire screen. My goal is to create a scrolling effect where as I scroll using the scrollbar, the current DIV remain ...

javascriptjqueryhtml

Vue is now no longer displaying errors in the console

Something strange is happening while I'm debugging a Vue/Nuxt app. Suddenly, the errors in the console have disappeared whenever my Javascript references a function or variable that doesn't exist. Instead of showing an error, it just fails silent ...

javascriptvue.jsnuxt.js

a single function spread across two controllers[JavaScript]

My query pertains to a JavaScript program with 2 controllers. The issue I am facing is the need for one function in both controllers (data.duration). This function serves two purposes, once for features themselves and once for the summary. Currently, this ...

javascriptjsonangularjs

Is it possible to link Angular across different iframes?

Is it possible to connect and share the same scope, controllers, directives, etc. with another iframe within the same domain? It would be interesting if I could also have the same ngApp in another iframe. Has anyone attempted something like this previousl ...

angularjs

Refresh choices for the user interface selection menu

I've successfully mastered the art of redefining options for Webix ui.richselect/ui.combo. The technique involves: richselect.getList().clearAll(); richselect.getList().parse(options_data) Now, I'm facing a challenge with changing options fo ...

javascripthtmlhtml-selectwebix

Facing issues with Express, http-proxy-middleware, and encountering the error net::ERR_CONNECTION_REFUSED

For some time now, I've been troubleshooting an issue with my Express App that utilizes http-proxy-middleware to forward requests to another backend service. The problem arises when a third-party application makes a request to my server using an IP ad ...

javascriptnode.jsexpressproxyhttp-proxy-middleware

Check if a specific number appears exactly once in an array and output either True or False

I am facing a challenge with comparing two arrays Array1 = [1,1,1,2,2,2,3,3] Array2 =[1,1,2,1] When comparing both arrays, the desired result is True if the number of occurrences of Integer 1 are the same. Array2 = [1,1,2] //Expecting False For the ab ...

javascriptarraysloops

Guide on replacing placeholders in a text with input fields and connecting them with v-model in Vue.js

I am currently working on creating an exam page that features fill in the gap type questions. These questions have placeholders where students need to insert the correct words or phrases. The questions are fetched via an ajax request and consist of simple ...

javascriptvue.js