javascriptjqueryangularjs

change the text of the button on click using angular JS


How I can change the text of the button on click of the button.

Here it is what I have tried.

HTML:

<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

JS:

function MainController($scope) {
  $scope.toggle = true;
}

Solution

  • I think, using a watch of toggle should do it

    <button ng-click="toggle = !toggle">{{toggleText}}</button>
    <div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
    

    then

    app.controller('AppController', function ($scope) {
        $scope.toggle = true;
    
        $scope.$watch('toggle', function(){
            $scope.toggleText = $scope.toggle ? 'Toggle!' : 'some text';
        })
    })
    

    Demo: Fiddle