AngularJS toggle string on click

Question

<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

Brocco · Accepted Answer · 2014-05-02 20:20:48Z

3

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

answered May 2, 2014 at 20:20

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LennyLip · Accepted Answer · 2016-03-16 15:02:24Z

1

Little bit simple

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

answered Mar 16, 2016 at 15:02

LennyLip

1,77619 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS toggle string on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related