AngularJS - ng-disabled not working for Anchor tag

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

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

Answer 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>

Answer 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/

Answer 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?

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

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

Answer 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!

Answer 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

Answer 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. They will soon learn that its the end page and they can click next but nothing will happen

Answer 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' : '#'}}" 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="#" .

Answer 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>

Answer 12

您可以使用ng-href禁用事件

Answer 13

There is no disabled attribute for hyperlinks in Angular JS. So you can do follows:

html

<a ng-click="disabled()" ng-class="{disabled: isLinkDisabled}">LINK TO Disable</a>

app.js

$scope.disabled = function() {
        $scope.isLinkDisabled = true;
    }

CSS

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

Answer 14

使用a-disabled而不是ng-disabled

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