CODEWITHSUNDEEP
javascripthtml
Nishant Ranjan
Nishant Ranjan

Reputation: 57

How to disable a link based on a variable value in HTML?

I have piece of code in HTML. I need to open a pop up based on a value in the variable? if variable value is true then it should be clickable but, in case of false it should not perform any action. Below is the code i am using. So "about" is a variable which is either true or false. project.about = true/false

   <a title="Refresh Project"
   ng-click="refreshProjectPopUp(project)"
   <span class="refresh-icon rightSpace"></span>
   </a>

I am not able to think how to add this condition here? Thanks in advance.

Upvotes: 0

Views: 385

Answers (2)

Bhagyashri Machale
Bhagyashri Machale

Reputation: 219

You can try this

<a title="Refresh Project"
   <a *ngIf="project.about==true"
   ng-click="refreshProjectPopUp(project)"
   </a>
   <span class="refresh-icon rightSpace"></span>
   </a>

Upvotes: 1

Alok Mali
Alok Mali

Reputation: 2881

You can use the ternary operator to bind the function. When the value is true the function will be called and if the value is false then nothing will happen.

Try to change the value of the project.about from true to false.

Working fiddle here

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

 <a title="Refresh Project" ng-click=" project.about ? refreshProjectPopUp(project) : ''">
    <span class="refresh-icon rightSpace">link</span>
 </a>
   
<br>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.project = {};
    $scope.project.about  = true;
    $scope.refreshProjectPopUp = function() {
        alert('Link is clicked');
    };
});
</script>

</body>

Upvotes: 1

Related Questions