AngularJS - ng-disabled not working for Anchor tag

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;
  };

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;}
}

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

<style>

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

</style>

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/

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?

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)" ng-click="vm.Submit()">Submit</a>
      </fieldset>

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}}"><input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/></a>

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!

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

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

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' : '#'}}" 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" and when is null, href will be href="#".

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>

You can use ng-href to disable event

Use a-disabled instead of ng-disabled

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