[AngularJS] Disable Link with ngClass

 AngularJS  

▌Introduction

---

We cannot directly disable a link (< a href >) by ngDisabled.

However, we can change the CSS by ngClass to disable it.

▌Environment

---

l   AngularJS v1.4.8

▌Sample

---

▋CSS

.linkdisabled {   color: darkgrey;   cursor: default;   pointer-events: none; }

▋HTML

<div ng-app="app" ng-controller="MyCtrl">   <a href="#" ng-class='LinkStyle'>My Link</a>   <br><br>   <input type="button" value="Enable Link" ng-click="EnableLink()" />   <input type="button" value="Disable Link" ng-click="DisableLink()" /> </div>

▋JS

var app = angular.module('app', [])   .controller('MyCtrl', function($scope) {     $scope.EnableLink = function() {       $scope.LinkStyle = "";     }     $scope.DisableLink = function() {       $scope.LinkStyle = "linkdisabled";     }   });

 (See sample codes HERE)

▌Reference

---

l   AngularJS - ng-disabled not working for Anchor tag