Reputation:

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

Upvotes: 66

Answers (14)

Adarsh Jadhav

Reputation: 1

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

Upvotes: 0

Devil Bro

Reputation: 989

You can use ng-href to disable event

Upvotes: 0

Umesh Kolapkar

Reputation: 22

Use a-disabled instead of ng-disabled

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

Upvotes: -6

Rauf Master

Reputation: 21

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>

Upvotes: 2

vicky

Reputation: 1580

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>

Upvotes: 2

Dinesh Vaitage

Reputation: 3183

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>

Upvotes: 0

Lucho

Reputation: 1

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="#".

Upvotes: 0

user3009021

Reputation: 121

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/

Upvotes: 12

Anik Islam Abhi

Reputation: 25352

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?

Upvotes: 7

pallavnav

Reputation: 11

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

Upvotes: 2

locnguyen

Reputation: 66

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

Upvotes: 0

adamjld

Reputation: 310

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!

Upvotes: 1

paul

Reputation: 22001

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

<style>

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

</style>

Upvotes: 26

Bazinga

Reputation: 11214

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

Upvotes: 82

AngularJS - ng-disabled not working for Anchor tag

Answers (14)

Related Questions