Change Text in a button using ng-click
Question
I am trying to change the text in the button using angular I am pretty much done but I have a few questions.
First, my code below just changes the text when I click the first time, how can I change it again after the second click? That button is hiding a <DIV> so that is the reason for the change?
Angular:
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
HTML:
<body ng-controller="MyCtrl">
<button ng-click="start()"> {{ myText }} </button>
</body>
The second part of my question is:
How can I apply that code in that code up in that HTML and Angular?
HTML:
<a ng-click="Menu()" class="btn btn-default" id="menu-client">hide the search</a>
Angular:
$scope.Menu = function(){
$("#wrapper").toggleClass("toggled");
};
2 answers
solution1
2 2015-10-07 14:16:29
Changing text:
JS
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function (myText) {
$scope.myText = (myText === 'Starting...') ? 'Finish' : 'Starting...';
}
});
HTML
<body ng-controller="MyCtrl">
<button ng-click="start(myText)"> {{ myText }} </button>
</body>
Changing class:
JS
$scope.isToggled = false;
HTML
<a ng-click="isToggled = true" class="btn btn-default" ng-class="{toggled: isToggled}" id="menu-client">hide the search</a>
solution2
1 2015-10-07 14:14:26
HTML
<a ng-click="Menu()" class="btn btn-default" id="menu-client">hide the search</a>
Angular
$scope.Menu = function(){
$scope.isHedden = true;
};
Now whichever element in the HTML that you want to hide/show, use ngHide directive for that:
<some-element ng-hide="isHidden">Some plain text or value goes here</some-element>
Look out https://docs.angularjs.org/api/ng/directive/ngHide for more details on this directive.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.