How to hide clicked button1 and show button2 and on click on button2 hide button2 and show button1 in angularjs?
Question
I am trying to hide the button1 when user clicked on button1 and show the button2.when user clicked on button2 and show the button1. At the time of when the user clicked button1 call the function myController1 and when the user clicked button2 call the function myController2
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myController">
<button ng-click="test1=true;myController1()" ng-show="test1">button1</button>
<button ng-show="test2" ng-click="test1=true;myController2()">button2</button>
</div>
<script>
function myController1() {
alert("hello");
}
function myController2() {
alert("hiii");
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
how show other element and also call the controller
4 answers
solution1
0 2014-09-19 08:34:42
Show if variable = true for button 1, and show if variable = false for button 2.
<button ng-click="toggleButtons()" ng-show="showButton1">button1</button>
<button ng-click="toggleButtons()" ng-show="!showButton1">button2</button>
and then in your controller
$scope.showButton1 = true;
$scope.toggleButtons = function () {
$scope.showButton1 = !$scope.showButton1;
};
Alternatively (depending on why you need this) you could just change the text within the button by binding it to a variable that you change on click.
<button ng-click="toggleButtons()" ng-show="showButton1">{{buttonText}}</button>
solution2
0 ACCPTED 2014-09-19 08:36:11
You could make less obtrusive and code clearer if you make use of only one variable to control show/hide.
<button ng-click="click1()" ng-show="button==1">button1</button>
<button ng-click="click2()" ng-show="button==2">button2</button>
Controller:
$scope.button = 1;
$scope.click1 = function() {
alert(1);
$scope.button = 2;
};
$scope.click2 = function() {
alert(2);
$scope.button = 1;
};
Demo: http://plnkr.co/edit/uZNwVDFWZyYvLFh2KgSQ?p=preview
solution3
0 2014-09-19 08:39:33
You should define these function in respective controller. you have mentioned ng-controller, define those function in myController.
see example
xxxx.controller('myController', function($scope) {
$scope.myController1 = function() {
alert("hello");
}
$scope.myController2 = function() {
alert("hiiii");
}
});
solution4
0 2014-09-19 08:40:50
<div ng-app="app" ng-controller="demo">
<button ng-click='btn1();' ng-show="show_btn1">btn1</button>
<button ng-click='btn2();' ng-show="show_btn2">btn2</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
angular.module('app', []).controller('demo', function demo($scope) {
$scope.show_btn1 = true;
$scope.show_btn2 = false;
$scope.btn1 = function() {
$scope.show_btn1 = false;
$scope.show_btn2 = true;
};
$scope.btn2 = function() {
$scope.show_btn1 = true;
$scope.show_btn2 = false;
};
})
</script>
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.