Angular changing button text on click

Question

I am working on a game where I need to let the user choose the next level upon completion of the previous level. This can go on up to level 7.

I need to be able to change the text on the button to indicate the next label number up to 7.

So, in the controller, I need to read the button text displayed previously so that I can display the next number.

Could someone please help? Here is my codepen codepen link

and the accompanying code that I have tried so far

<html ng-app="myApp">
  <body ng-controller="myCtrl">
     <div id="nextlevel">
        <h3>Level Completed!</h3>
        <button id="nextplay" ng-model="number" ng-init="buttontext='Level 
        2'">{{buttontext}}</button>
   </div>    
  </body>
</html>

and the controller -

myApp = angular.module("myApp",[]);

myApp.controller("myCtrl", function($scope){

  document.getElementById("nextplay").addEventListener('click', function() {
        nextlevel.style.display = 'none';
        setTimeout(function() {
          nextlevel.style.display = '';
        }, 500);

        if ($scope.number <=7) {            
           $scope.number = $scope.number + 1;
        }
        el.emit('gameStarted', {});        
    });
  $scope.buttontext = "Level " + $scope.number;
});

I am not sure how to update the value of the button text to next value.

amir.algazi · Accepted Answer · 2018-12-09T19:02:54.083

Here is a solution and some notes that I recommend to pay attention on:

 <html ng-app="myApp">
  <body ng-controller="myCtrl">
   <div id="nextlevel">
     <h3>Level Completed!</h3>
     <button id="nextplay" ng-click="buttonClicked()">
      Level {{number}}
     </button>
   </div>
  </body>
 </html>


  myApp = angular.module("myApp",[]);

  myApp.controller("myCtrl", function($scope) {
  $scope.number = 1;

  $scope.buttonClicked = function() {
    nextlevel.style.display = 'none';
    setTimeout(function() {
      nextlevel.style.display = '';
    }, 500);
    $scope.number++;
  }
 });

Instead of 'addEventListener', in AngularJs there is a directive called 'ng-click' which invokes functions that are included in the controller's $scope.
Level can be written directly in your html with binding to a variable of $scope (called 'number').
The directive 'ng-init' is not needed here.

Thank you so much Amir. Could you please also help me understand why I was not able to increment the number variable in my code and how are you able to do so? — Niraj, Dec 09 '18 at 04:42

Angular changing button text on click

1 Answers1