CODEWITHSUNDEEP
angularjsangularjs-ng-click
ngplayground
ngplayground

Reputation: 21627

AngularJS toggle string on click

<button id="visibilityStatus" ng-model="visibilityStatus" ng-click="visibilityEnable()">Enable</button>

$scope.visibilityEnable = function() {
    document.getElementById('visibilityStatus').value(document.getElementById('visibilityStatus').value == 'Enabled' ? 'Disabled' : 'Enabled');
}

Using AngularJS I'm tryingto toggle between 2 values when the button is clicked, the values I'm trying to get it to toggle are Enabled and Disabled

Thanks in advance

Upvotes: 1

Views: 1581

Answers (2)

LennyLip
LennyLip

Reputation: 1767

Little bit simple

<button ng-init="buttonText='Enable'" ng-click="buttonText = buttonText === 'Enable' ? 'Disable' : 'Enable'">{{buttonText}}</button>

Upvotes: 1

Brocco
Brocco

Reputation: 64893

From your controller you just set the value(s) that you want to display, and have the HTML template render your value(s).

Change your markup to:

<button ng-model="visibilityStatus" ng-click="visibilityEnable()" ng-bind="buttonText"></button>

alternate markup: 

<button ng-model="visibilityStatus" ng-click="visibilityEnable()">{{buttonText}}</button>

And in your controller:

$scope.buttonText = 'Enable'
$scope.visibilityEnable = function(){
  $scope.buttonText = $scope.buttonText === 'Enable' ? 'Disable' : 'Enable';
}

Upvotes: 3

Related Questions