Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

I'm currently working on a project that involves displaying and hiding a lot of content dynamically using ng-show. Some of the expressions being evaluated are quite lengthy, like this...

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
>...</div>

My goal is to ensure that this content is ADA WCAG 2.0 compliant. As part of this effort, I am adding aria-disabled attributes to all the hidden content. The aria-disabled attribute will have a value of either true or false, reflecting whether the content is hidden (true) or visible (

false>). It should always be the opposite of the <code>ng-show
value and update dynamically as the ng-show attribute changes.

To maintain code cleanliness and readability, I want to avoid duplicating code and inverting each value manually with an exclamation mark, like this...

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="!some.object.with.nested.values
    && !some.other.object.with.other.nested.values
    && !also.looking.at.the.value.in.this.object
    && obj.example.something.goes.here"
>...</div>

I would prefer to utilize a method like this...

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="{{invertNgShow(this)}}"
>...</div>

The concept here is to use a custom function called invertNgShow to retrieve the Boolean value of the element's ng-show attribute, invert it, and return the result. However, I have not yet implemented a working solution for this.

Thank you for your assistance.

javascriptangularjsng-show

Answer №1

When using ngShow, you can pass expressions. Simply assign the calculated value to a variable and access it within the controller like this:

  option1: <input type="checkbox" ng-model="option1">
  option2: <input type="checkbox" ng-model="option2">
  option3: <input type="checkbox" ng-model="option3">
  ng-show: <input type="checkbox" ng-model="allOptionsSelected" disabled>
  <p ng-show="(allOptionsSelected = (option1 && option2 && option3))" aria-disabled="{{!allOptionsSelected}}">Hello {{name}}!</p>

Check out a demo here: http://plnkr.co/edit/jg56QFsV6ohLu59EPS2H?p=preview

Answer №2

After some experimentation, I decided to come up with a special directive...

myCustom.directive('ngAccessibility', function ($compile) {
  return {
    restrict: 'A',
    replace: false, 
    priority: 1000,
    link: function postLink(scope, elem, attrs) {  
        elem.removeAttr("ng-accessibility");
        scope.$watch(attrs.ngShow, function(){
          elem.attr('aria-hidden', !scope.$eval(attrs.ngShow));  
        });
      }
    };
});

...and this is how it appears in the HTML code...

<div ng-show="some.object.value" ng-accessibility >...</div>

This directive effectively modifies the behavior of ng-show, creating an inverted display that uses aria-hidden. This results in cleaner and more efficient markup.

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

Any suggestions on resolving the message "Unable to locate module './commands/${file}'"?

Can someone assist me in resolving this issue? I am trying to develop a code that includes advanced commands. Here is the code snippet: const commandFiles = fs.readdirSync('./commands/').filter(file => file.endsWith('.js&apo ...

javascriptdiscord

Reactive Form value is not displaying in view because of FormControlName issue

I have successfully retrieved data from the database and need to pre-fill an update form with preset values. The issue I am facing is that when I add FormControlName to the input field, it removes the preset values. I have tried using setValue and patchV ...

javascriptangulartypescriptangular-reactive-forms

Submitting a form via NextJS to an internal API

After reading through the Next.JS documentation, I came across an interesting point. Note: Instead of using fetch() to call an API route in getStaticProps, it's recommended to directly import the logic from within your API route and make necessary cod ...

javascripttypescriptnext.js

What is the process for generating Json using information from a form?

Recently, I embarked on a project that involves creating online tours via a form filled out by the administrator. The data submitted through the form is then mapped into a Mongoose Schema and transformed into JSON. In the createcontent.js file, I utilized ...

javascriptnode.jsexpressmongooseslugify

"What is the best way to include additional fields within a popover in an AngularJS application

This is my code for implementing a popover using AngularJS. I am trying to figure out how to add custom styling to the popover HTML, but I am having trouble binding elements in that part of the code. <!DOCTYPE html> <html> <head> <l ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Eliminate unnecessary CSS classes from libraries such as bootstrap when working on a React project

Our team is currently in the process of developing a React project that involves webpack and babel. Our goal is to automatically remove any unused CSS classes from CSS frameworks Bootstrap and AdminLTE 2, which are integral parts of our project. For this ...

javascriptreactjswebpackbabeljsbabel-plugin-react-css-modules

Encountering a deployment issue on Vercel while building with NextJS

I'm facing issues while attempting to deploy my Nextjs app on Vercel: Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: (0 , react_development_.useState) is not a function or its ret ...

javascriptnode.jsreactjsnext.jsvercel

Showing dummy data in demo mode with an AngularJS table

I stumbled upon this interesting jsfiddle http://jsfiddle.net/EnY74/20/ that seems to be using some demo data. If you check out this example https://jsfiddle.net/vsfsugkg/2/, you'll notice that the table originally has only one row, but I modified it ...

javascriptjqueryangularjspaginationjquery-pagination

Obtain array buffer from NodeJS to capture frames from a video file

My current goal is to extract frames from a video in node without relying on a video tag. I am utilizing openvg-canvas for this task, which allows me to print images and use the canvas API functionalities successfully. The challenge lies in the fact that ...

javascripthtmlnode.jsvideocanvas

Is it possible to determine the success or failure of an asynchronous function when the function itself already handles errors?

The architecture of my app is currently set up with functions that are scoped to specific modules, such as "Auth" for instance: async function authenticate(email) { let authenticated = false; try { if (email) { if (!validEmail(email) ...

javascript

Transmit information from a Chrome extension to a Node.js server

Recently, I developed a basic Chrome extension that captures a few clicks on a specific webpage and stores the data in my content_script. Now, I am looking for ways to transmit this data (in JSON format) to my node.js file located at /start. I am seeking ...

javascriptjquerynode.jsajaxgoogle-chrome-extension

Transforming JSON data into a visually appealing pie chart using highcharts

I'm having trouble loading my JSON string output into a highcharts pie chart category. The chart is not displaying properly. Here is the JSON string I am working with: var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\ ...

javascriptjavajsonchartshighcharts

When an `angularjs select` is used with a filter, the first line may appear empty at first. However

I'm feeling a bit confused about why my ng-options is once again giving me an empty line with a filter applied. Could you please take a look at this plunker to see the issue? The goal is to show an org chart in a dropdown list that is based on a tre ...

javascriptangularjsselectng-optionsangular-filters

Error: $controller does not function as a controller within another controller

I recently started learning Angular JS and attempted to call one controller within another, but encountered the following error: ionic.bundle.js:21157 TypeError: $controller is not a function at new <anonymous> (http://localhost:8080/itravel/www/js/ ...

javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller

Blocking server.js in node.js can be achieved by modifying the code to prevent

Challenge Description In my server.js file, I have included a config file. This is how my server.js file looks: Includes some necessary imports Requires config.js -> makes an API call to get the configuration data using promises Starts the ser ...

javascriptnode.jsexpressasync-await

New elements can be inserted at the rear of the queue while older elements are removed from the front of the queue

I'm new to JavaScript and currently working on a task involving queues. Here is the task description: Create a function called nextInLine that takes an array (arr) and a number (item) as parameters. The function should add the number to the end of ...

javascriptarraysjson

Evaluating the compatibility of AngularJS using the Selenium testing

I am currently working on a single-page application using ASP MVC and AngularJS, and I am looking for ways to test the UI. Right now, I am experimenting with Selenium along with PhantomJS and WebKit drivers. On one of my testing pages, there is a list of ...

angularjsseleniumc#-4.0phantomjsend-to-end

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

javascripthtml

JEST: Troubleshooting why a test case within a function is not receiving input from the constructor

When writing test cases wrapped inside a class, I encountered an issue where the URL value was not being initialized due to dependencies in the beforeAll/beforeEach block. This resulted in the failure of the test case execution as the URL value was not acc ...

javascriptnode.jstypescriptjestjs

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

javascriptjquerycssonscroll