AngularJS – ng-disabled not working for Anchor tag

The question:

I am using ng-disabled, I like it. It’s working good for me for input and buttons. For anchor tag not working. How can I fix?

HTML code

<a ng-disabled="addInviteesDisabled()">Add</a>

JS code

  $scope.addInviteesDisabled = function() {
      return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
  };

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

There is no disabled attribute for hyperlinks.
You can do this:

.disabled {
  cursor: not-allowed;
}

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>

$scope.disabled = function() {
  if($scope.addInviteesDisabled) { return false;}
}

Method 2

You could create a linkDisabled css class, and apply it to your anchor:

<style>

.linkDisabled {
  cursor: not-allowed;
  pointer-events: none;
  color: grey;
}

</style>

Method 3

You can do this through CSS, no fancy directives needed. Just use ng-class to apply a class sort of like this:

ng-class:

ng-class="{disabledLink: disabledFunction()}"

css:

.disabledLink {
    color: #ccc;
    pointer-events:none;

}

full credit to-

https://css-tricks.com/pointer-events-current-nav/

Method 4

You can’t disable anchor tag using ng-disabled.

Form control has disabled property but anchor tag has no disable property.

Check Why does angular’s ng-disabled works with bootstrap’s btn class?

Method 5

You can user fieldset for enable disable a link.

<input type="checkbox" ng-model="vm.iagree"> I Agree
      <fieldset ng-disabled="!vm.iagree">
               <a class="btn btn-primary grey" href="javascript:void(0)" rel="nofollow noreferrer noopener" ng-click="vm.Submit()">Submit</a>
      </fieldset>

Method 6

You can not disable anchor tag directly.You can do something this:

Assign two property in controller

public bool btndisabled { get; set; }
public string href { get; set; }

And use it for controller side code :

if (auction.btndisabled== true)
            {
                auction.href = "javaScript:void(0);";
            }
            else
            {
                auction.href = "/Auction/Index?id=" + auction.Auction_ID;
            }

In your view :

<a href="{{item.href}}" rel="nofollow noreferrer noopener"><input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/></a>

Method 7

When ng-Disabled evaluated to true, sets the disabled attribute on the element which is generally an input, or other form control. <a> tags don’t have disabled attributes so it will never be set. Try setting the ng-disabled on your link to true and you will see for yourself.

Maybe this will help: ng-disabled And Anchor Tags Oh Noes!

Method 8

Yes buddy we can disable the anchor tag, lets see what need to do that. Anchor is clickable , first we nedd to disable the click , we can do that by pointer-events: none; and then to show the use it’s disabled we can change the color on which we have to disable it like color: #95979A;. Still we need to understand whats happening here, adding the above will not disable the click event of anchor tag. To stop that we need to add ng-disabled which we add the attribute event as disabeld=disabled, We need to catch that using a[disabled].

So final Code :
a[disabled] {pointer-events: none;color: #95979A;}
will disable the click event of the anchor tag.

Hope this helped.
Thanks

Method 9

The best way is to add the disabled condition into the function of the anchor. Thus, the functions only perform when the disabled condition is checked and passed.

$scope.next_kh_resource = function(){
    if ($scope.selected_kh_index < ($scope.selected_step.step_kh_resources.length -1)){
        var next = $scope.selected_kh_index + 1;
        $scope.selected_kh_index = $scope.selected_kh_index +1;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[next];
    }
}
$scope.prev_kh_resource = function(){
    if ($scope.selected_kh_index > 0){
        var prev = $scope.selected_kh_index -1;
        $scope.selected_kh_index = prev;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[prev];
    }

}

In the example above, I disabled the pagination anchors next and prev by inserting the disabled condition into the functions. The users are smart. They will soon learn that its the end page and they can click next but nothing will happen

Method 10

i had the same problem doing a navigation buttons, this workaround was a good solution for my project!

<a href="{{nextItem ? '/the-link/i-want-to-use' : '#'}}" rel="nofollow noreferrer noopener" ng-class="{'iamDisabled':!nextItem}">Some link text</a>

Basically, there are two buttons (made with links tags) one for next and other for previous. there are two $scope variables, nextItem and prevItem , one for each button. So if there is no next (or previous) the tag will be styled properly (so you see its disabled).

When nextItem is not null, the href will be rendered to href="/the-link/i-want-to-use" rel="nofollow noreferrer noopener" and when is null, href will be href="#" rel="nofollow noreferrer noopener".

Method 11

No disabled attribute in anchor tag. Used “disabled” class for anchor tag.

$scope.data = {name:dinesh}
<a ng-click="get_data()" ng-class="{disabled: data}">Add</a>

Method 12

You can use ng-href to disable event

Method 13

Use a-disabled instead of ng-disabled

  <a a-disabled="addInviteesDisabled()">Add</a>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment