如何在angularjs中隐藏被单击的button1并显示button2并在单击button2时隐藏button2并显示button1？
[英]How to hide clicked button1 and show button2 and on click on button2 hide button2 and show button1 in angularjs?
问题描述
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. 
当用户单击button1并显示button2时，我试图隐藏button1。当用户单击button2并显示button1时，我试图隐藏button1。 At the time of when the user clicked button1 call the function myController1 and when the user clicked button2 call the function myController2 当用户单击button1时，调用函数myController1；当用户单击button2时，调用函数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 个解决方案
解决方案1
0 2014-09-19 08:34:42
Show if variable = true for button 1, and show if variable = false for button 2. 显示按钮1的变量是否为true，按钮2的变量是否为false。
<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>
解决方案2
0 已采纳 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 演示： http ： //plnkr.co/edit/uZNwVDFWZyYvLFh2KgSQ？p = preview
解决方案3
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. 您已经提到ng-controller，请在myController中定义这些功能。
see example 看例子
xxxx.controller('myController', function($scope) {
$scope.myController1 = function() {
alert("hello");
}
$scope.myController2 = function() {
alert("hiiii");
}
});
解决方案4
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.