首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何隐藏单击的button1和显示button2,以及单击button2、隐藏button2和显示button1?

如何隐藏单击的button1和显示button2,以及单击button2、隐藏button2和显示button1?
EN

Stack Overflow用户
提问于 2014-09-19 08:22:03
回答 4查看 135关注 0票数 1

我试图在用户单击button1时隐藏button1,并在用户单击button2并显示button1时显示按钮2。当用户单击button1调用函数myController1和用户单击button2调用函数myController2时

代码语言:javascript
复制
<!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>

如何显示其他元素并调用控制器

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-09-19 08:36:11

如果只使用一个变量来控制显示/隐藏,则可以使代码更清晰、不那么突出。

代码语言:javascript
复制
<button ng-click="click1()" ng-show="button==1">button1</button>
<button ng-click="click2()" ng-show="button==2">button2</button>

主计长:

代码语言:javascript
复制
$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

票数 0
EN

Stack Overflow用户

发布于 2014-09-19 08:34:42

对按钮1显示if变量= true,对按钮2显示if变量= false。

代码语言:javascript
复制
<button ng-click="toggleButtons()" ng-show="showButton1">button1</button>

<button ng-click="toggleButtons()" ng-show="!showButton1">button2</button>

然后在你的控制器里

代码语言:javascript
复制
$scope.showButton1 = true;

$scope.toggleButtons = function () {
  $scope.showButton1 = !$scope.showButton1;
};

或者(取决于您为什么需要这一点),您可以通过将其绑定到单击时更改的变量来更改按钮中的文本。

代码语言:javascript
复制
<button ng-click="toggleButtons()" ng-show="showButton1">{{buttonText}}</button>
票数 0
EN

Stack Overflow用户

发布于 2014-09-19 08:39:33

您应该在各自的控制器中定义这些函数。您已经提到ng控制器,在myController中定义这些函数。

见示例

代码语言:javascript
复制
xxxx.controller('myController', function($scope) {
    $scope.myController1 = function() {
        alert("hello");
    }
    $scope.myController2 = function() {
        alert("hiiii");
    }
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25929426

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档