如何在angularjs中隐藏单击的按钮1和显示按钮2以及单击按钮2隐藏按钮2和显示按钮1
How to hide clicked button1 and show button2 and on click on button2 hide button2 and show button1 in angularjs?
当用户单击按钮1并显示按钮2时,我正试图隐藏按钮1。当用户单击按钮1时调用函数myController1,当用户单击按键2时调用函数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>
如何显示其他元素并同时调用控制器
如果只使用一个变量来控制显示/隐藏,则可以减少干扰,使代码更清晰。
<button ng-click="click1()" ng-show="button==1">button1</button>
<button ng-click="click2()" ng-show="button==2">button2</button>
控制器:
$scope.button = 1;
$scope.click1 = function() {
alert(1);
$scope.button = 2;
};
$scope.click2 = function() {
alert(2);
$scope.button = 1;
};
演示:http://plnkr.co/edit/uZNwVDFWZyYvLFh2KgSQ?p=preview
对于按钮1显示if variable=true,对于按钮2显示if variable=false。
<button ng-click="toggleButtons()" ng-show="showButton1">button1</button>
<button ng-click="toggleButtons()" ng-show="!showButton1">button2</button>
然后在你的控制器
$scope.showButton1 = true;
$scope.toggleButtons = function () {
$scope.showButton1 = !$scope.showButton1;
};
或者(取决于您为什么需要),您可以通过将按钮中的文本绑定到单击时更改的变量来更改该文本。
<button ng-click="toggleButtons()" ng-show="showButton1">{{buttonText}}</button>
您应该在各自的控制器中定义这些函数。您已经提到ng控制器,请在myController中定义这些函数。
参见示例
xxxx.controller('myController', function($scope) {
$scope.myController1 = function() {
alert("hello");
}
$scope.myController2 = function() {
alert("hiiii");
}
});
<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>
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件