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;
}
the Angular 2 onClick EventThe Angular 2 event system can be used to handle different types of events, such as mouse clicks, keyboard presses, and touch gestures. The onclick event triggers an event or function when a user clicks on a component or an element.
Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.
For a single btn, it's ok to use ng-click or onclick in the ng-app . There is no difference between the two functions. For effective team work, you,d better to have an account with each other. In Angular apps, ng-click is recommended.
To change button text using JavaScript, the simplest way is to use the textContentproperty along with the getElementByIdmethod. document.getElementById("button").textContent="Submit"; You can also use the innerHTMLproperty to change button text. document.getElementById("button").innerHTML = "Submit"; Let’s say I have the following HTML form:
Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked.
You can use two diff button having two diff text u want and use ng-if in both buttons and put your $scope varriable having true/false in ‘ng-if’ of both. you can also do with Ternary operation with only one button. AngularJS has a great feature that you can pass expressions into your HTML code.
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.
Or, keep all the content in your HTML, rather than defining the button text in the controller, if you prefer:
<button ng-click="toggle = !toggle">
<span ng-show="toggle">Toggle to Off</span>
<span ng-hide="toggle">Toggle to On</span>
</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With