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

Problem with integration of Bootstrap datetime picker in AngularJS directives

I am currently utilizing the Bootstrap Datetime picker to display data from a JSON file in calendar format. The data is first converted into the correct date format before being shown on the calendar, with both a To date and From date available. scope.onH ...

javascriptjqueryangularjstwitter-bootstrapdatetime

UI-data contracts: enhancing client-side JSON data validation

I have encountered situations where the JSON data I receive from services and database calls, created by a different team, contains invalid data combinations that lead to unintended errors downstream. For example, in the case below, if the "rowContent" fi ...

javascriptajaxjsonjsonschema

What causes the undefined value of "this" in the Vue Composition API setup function?

A Vue component I've created is using v3's composition API: <template> <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" /> <labe ...

javascriptvue.jsvuejs3vue-composition-api

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

javascriptreactjsnext.jsusesound

Error: The System variable is not defined in the current context - Angular 2

Recently, I updated my angular version and now I am encountering errors in the console that are preventing my application from running smoothly. Despite having no errors in my terminal, this issue has been persisting for days and I can't seem to find ...

angularjsangularnode-modules

Creating a stunning art exhibition using React Native

Currently, I am in the process of creating a gallery component that utilizes both the scrollview and image APIs. I'm curious about how the scrollview manages its child components when it scrolls down. Does it unmount the parts that are not currently ...

javascriptreactjsreact-native

Having trouble updating the value of my textfield in material-ui using formik

Below is the code I'm working with to set a default value using the material-ui Textfield API within a formik fieldarray: <TextField name={`myGroups.${index}.myGroupName`} value={`Group ${index+1}`} label="Group" InputProps={{ ...

javascriptreactjsmaterial-uiformik

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

javascriptangulartypescriptspring-bootnested-loops

New method for obliterating a controller with the usage of the as and this structure

Is there a different approach to destroy a controller when using the 'as' syntax and binding values on the controller, or should I still rely on the scope? For example, if a controller is declared in the dom using the 'as' syntax: < ...

angularjsgarbage-collection

The process of ensuring a component updates upon clicking on it

In the process of creating a to-do app, I am working on implementing an edit mode for tasks. My goal is to have a task title that expands into task details when clicked (using Collapse from MUI). Additionally, I aim to enter into an edit mode by clicking o ...

javascriptreactjsmaterial-ui

Exploring the Fusion of Strings and Arrays of Javascript Objects using jQuery and JSON

Trying to achieve a simple task, but not very proficient in jQuery so struggling to figure it out. Want to send JSON data to an ASP.NET Controller. Data includes strings and a list of objects. The code snippet would appear like this: View: $(document). ...

javascriptjqueryasp.netjsoncontroller

Can angularjs html, css, and js files be intercepted?

Is it possible to create an http interceptor that can intercept not only requests made using the $http service, but also css, html, and js files used in templates? Shown below is the code for the existing interceptor: app.factory('redirectIntercepto ...

angularjsangular-http-interceptors

Vue.Js for a Single Page Application utilizing Two Data Sources

Currently, I am working on developing a Single Page Application using vue.js. My project consists of 2 bundles of pages stored in separate S3 buckets - one public and one private. The public bundle is meant to be accessible to all users, while the private ...

javascriptvue.jslazy-loadingsingle-page-application

The submit form and cordova functions are failing to trigger

I am encountering an issue where I cannot successfully call the submitForm() function when attempting to trigger it via ng-submit. The function does not execute as expected. How can I troubleshoot and resolve this problem? (function () { 'use str ...

javascriptangularjscordovaangular-controller

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

javascriptjqueryhtmlcss

Leveraging nodegit in an AngularJS application

Currently, I am in the process of developing an application using AngularJS that requires cloning GitHub wikis associated with GitHub repositories. Unfortunately, the GitHub API lacks the necessary functionality to interact with GitHub wikis, and after see ...

node.jsangularjsgithub

Leveraging various routes to access data with a shared VueJS 3 component

Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API. Main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/route1& ...

javascriptvue.jsvue-routervuejs3

Disable onclick action for programmatically created buttons

I'm facing an issue with the code I'm using to delete messages on my website. The problem is that while newly added messages are being dynamically loaded, the delete button (which links to a message deletion function) does not seem to be working. ...

javascriptjqueryhtmlajax

Can the name of the Grunt task target be utilized within attributes?

I have implemented the grunt-replace task to make some content changes in the index.html file. However, I am looking for a way to avoid repeating code unnecessarily. The code snippet below is just an example of what I am trying to accomplish: replace: { ...

javascriptgruntjstask

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

We previously utilized the V3 edition of Fancybox, incorporating our increaseImageClicks and increaseVideoClicks functions within its afterShow function: /* FANCYBOX OLD (https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/): * ...

javascriptjqueryfancybox