How to disable an anchor tag based on a condition using ng-class?

I have a displayed table that includes a column called count which has an <a> tag with a href to a page. I want to show a link for all rows where count > 0 and disable it when count=0.

I attempted to use AngularJS - ng-disabled not working for Anchor tag and discovered that using ng-disabled doesn't work in this case.

Using ng-class seems like a viable solution, but I am struggling to specify the condition within ng-class.

P.S. I want to add cursor:not-allowed directly in ng-class. I am unable to change the CSS.

Below is my HTML Code

<tr ng-repeat="service in services">
    <td>{{$index+1}}</td>
    <td>{{service.serviceName}}</td>
    <td><a href="#/info/{{service.id}}">{{service.numberOfScenarios}}</a></td>
</tr>

numberOfScenarios corresponds to the count value.

htmlcssangularjs

Answer №1

To display basic information only, consider using the ng-show directive.

If you need to apply specific classes, utilize the ng-class directive. The CSS property cursor:not-allowed can be applied using 

ng-class="{'yourclassname':angular-condition}"
if it is already included in a class.

Another approach could be:

<td>
    <a ng-href="#/info/{{service.id}}" ng-show="service.numberOfScenarios > 0"><span ng-bind="service.numberOfScenarios></span></a>
</td>

The link will not be displayed when service.numberOfScenarios === 0. In such cases, there is no requirement to apply the CSS separately.

Update:

<td>
    <a ng-href="#/info/{{service.id}}" ng-show="service.numberOfScenarios > 0">
        <span ng-bind="service.numberOfScenarios"></span>
    </a>
    <span ng-show="service.numberOfScenarios === 0" ng-bind="service.numberOfScenarios" style="cursor:not-allowed;"></span>
</td>

Answer №2

One way to conceal a link is to follow devjsp's advice.

Alternatively, you could try something like this.

<a ng-href="count > 0 ? '#/info/{{service.id}}' : ''">Google</a>

Revised:

<span ng-show="count > 0">
    <a href="#/info/{{service.id}}">Link</a>
</span>
<span ng-show="count === 0" class="notAllowedClass">
    0 <!-- As suggested in a different response if you wish to display 0 count -->
</span>

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

Why does my console refuse to log the input entered for the search?

Looking to become proficient in web development, I am attempting to record HTML search queries in the console after storing them in a variable. However, when I try running the search procedure, nothing seems to be displaying in my browser's inspect co ...

javascripthtml

Why does the hashtag keep popping up every time I launch the Bootstrap Modal?

I can't figure out why this keeps happening. I researched how to eliminate hashtags from the URL and found multiple solutions. However, none of them proved to be helpful as they only removed the hashtag, requiring a page refresh which still didn' ...

javascriptjqueryhtmlanchorhref

JavaScript resets the timer whenever the page is refreshed

Is there a way to maintain the timer in a quiz even after refreshing the page? <html><h1>Js Timer</h1> <div style="font-weight: bold;" id="quiz-time-left"></div> <script type="text/javascript"> var total_seconds = ...

javascriptphphtmlcodeigniternan

What could be causing the malfunction of the Ionic slide show?

I'm facing a unique issue with the ionic slide show feature. Despite following the recommended method on the Ionic website (Ionic Slide Show), I seem to be encountering an unexpected glitch. Here is the code snippet that I am working with: <ion-s ...

angularjscordovaionic-framework

Tips for ensuring a watcher only runs once in each digest cycle, regardless of how many times the property is modified

I am facing an issue with my function $scope.render() that relies on the value of $scope.myProperty to render a chart. Whenever myProperty changes during a digest cycle, I need to ensure that $scope.render() is called only once at the end of the digest cyc ...

javascriptangularjsangularjs-scope

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

javascriptjqueryhtmlcsspopup

Tips for retrieving selected items in an array object

Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...

javascriptjqueryhtmlcss

Creating a carousel in AngularJS using ng-repeat without resorting to jQuery

Looking for a solution to display elements on my page with ng-repeat in a carousel-like fashion. Each element should have a photo, short description, and reveal a long description on click. It's important that it's mobile-friendly so users can sw ...

javascriptangularjscarouselangularjs-ng-repeat

Using an icon font as a background in CSS attribute

I am struggling to replace a background image in CSS with an icon font instead of an icon image. I have been unable to accomplish this task. Here is the CSS property I am working with: .social-networks .twitter{background:url(../images/social/twitter.png) ...

htmlcsswordpressicons

How do I navigate to a different page in Vue.js HTML based on user selection?

Here is my first attempt at writing HTML code: <div class="col-md-4" > <div class="form-group label-floating"> <label class="control-label">Select No</label> <select class="form-control" v-model="or" required=""> ...

javascriptjqueryhtmlvue.jsvue-component

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Is it possible to implement a code that will organize a dropdown list alphabetically?

Could someone assist me in sorting the location items alphabetically in this search form at: I would like the locations to be displayed in alphabetical order. Any help with updating the code below would be greatly appreciated. Here is the current code sn ...

phphtmlwordpressformssorting

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Using ReactJS and SCSS to adjust the height: set the height to be twice the size of the element's

Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...

cssreactjs

What is the best way to retrieve multiple image file names using JavaScript?

I attempted to use the code snippet below to retrieve the names of all the images I selected, however when I used 'alert', I only received one name even though I selected multiple. My goal is to have all the names of the selected photos saved in ...

javascripthtml

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

Ways to align list items in the middle of a webpage with CSS

Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here. My goal is to have the links adjust to align left based on the browser size, and also have the imag ...

htmlcsswordpressresponsive-designhtml-lists

Conceal descendant of list item and reveal upon clicking

In my responsive side menu, there is a submenu structured like this: .navbar ul li ul I would like the child menus to be hidden and only shown when the parent menu is clicked. Although I attempted to achieve this with the following code, it was unsucces ...

javascriptjqueryhtmlcss

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Registering directives dynamically during runtime

Typically, directives are added to a module by calling the directive method: .directive('MyDirective', function (MyDep) { return { restrict: 'E', template: '<div></div>', controller: fu ...

angularjsangularjs-directiveangularjs-module