Javascript 如何在angularjs中隐藏单击的按钮1和显示按钮2以及单击按钮2隐藏按钮2和显示按钮1？_Javascript_Angularjs Directive

Javascript 如何在angularjs中隐藏单击的按钮1和显示按钮2以及单击按钮2隐藏按钮2和显示按钮1？

javascript

Javascript 如何在angularjs中隐藏单击的按钮1和显示按钮2以及单击按钮2隐藏按钮2和显示按钮1？,javascript,angularjs-directive,Javascript,Angularjs Directive,当用户单击按钮1并显示按钮2时，我试图隐藏按钮1。当用户单击按钮2并显示按钮1时。当用户单击按钮1时，调用函数myController1；当用户单击按钮2时，调用函数myController2 <!DOCTYPE html> <html> <body> <div ng-app="" ng-controller="myController"> <button ng-click="test1=true;myController1()" ng-

当用户单击按钮1并显示按钮2时，我试图隐藏按钮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>

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

对于按钮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>

如果只使用一个变量来控制显示/隐藏，则可以使代码更清晰、更不显眼

<button ng-click="click1()" ng-show="button==1">button1</button>
<button ng-click="click2()" ng-show="button==2">button2</button>

演示：您应该在各自的控制器中定义这些函数。您提到了ng控制器，请在myController中定义这些函数

参见示例

xxxx.controller('myController', function($scope) {
    $scope.myController1 = function() {
        alert("hello");
    }
    $scope.myController2 = function() {
        alert("hiiii");
    }
});

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>