Angularjs - Ng-Disabled Not Working For Anchor Tag

AngularJS - ng-disabled not working for Anchor tag

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

ng-disabled on an anchor tag works but tag is still clickable

So this is the 'hack' i used to get around my issue. I duplicated the button and just used ng-show to figure out which button should be shown - the disabled one or working one.

    <a class="btn btn-primary pull-right download-button disabled" target="_self" href="/download" ng-show="!downloadAvailable">download</a>
    <a class="btn btn-primary pull-right download-button" target="_self" href="/download" ng-show="downloadAvailable">download</a>

ng-disabled for href tag in list item not working

You cannot use ng-disable on a <a> tag, instead you can use a class and the css property pointer-events:none so the click will go through the link.

How can I make my AngularJS link disabled?

Here is a simple directive which intercepts the click event and prevents the page transition based on a scope variable:

module.directive('myLink', function() {
  return {
    restrict: 'A',
    scope: {
      enabled: '=myLink'
    },
    link: function(scope, element, attrs) {
      element.bind('click', function(event) {
        if(!scope.enabled) {
          event.preventDefault();
        }
      });
    }
  };
});

You can use it like this:

<a my-link="linkEnabled" data-ng-class="{'disabled': !linkEnabled}" href="/home/overview">
  <i class="fa fa-home fa-fw">Link</i>
</a>

Here is a demo

Refactor anchor tag to button due to ng-disabled not working

You could try this:

<button class="btn btn-primary" ng-disabled="placeOrderDisabled()" ng-click="clickFn()">
  <i class="fa fa-chevron-right"></i>
</button>

on JS file. I assume @Url.Action is object function inside the controller.

$scope.clickFn = function () {
  var url = $scope.Url.Action('Order','ShoppingCart') + '?deliveryMethod=' + $scope.deliveryMethod;
  window.location.href = url;
}

AngularJS - ng-disabled not working for Anchor tag

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

ng-disabled on anchor inside <li>

ng-disabled don't work on the li tag. Need to do this using css styles.

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

<li class="disabled"><a ui-sref="state.random">A random state</a></li>

---

Related Topics