在angularjs中单击按钮时隐藏和显示按钮答案

【问题标题】：hide and show button on button click in angularjs在angularjs中单击按钮时隐藏和显示按钮
【发布时间】：2016-10-10 09:06:51
【问题描述】：

我正在创建一个有四个按钮的网络应用程序

1)点击这里

2) 点击这里

3)（隐藏按钮）显示点击这里

4)（隐藏按钮）在此处显示点击

第三和第四个按钮被隐藏

我想要的是__________________

当我点击第一个按钮时，第三个按钮应该是可见的，当我点击第二个按钮时，第四个按钮应该是可见的，这是我的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>
  <link href="glyphicons.css" rel="stylesheet" type="text/css">
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>



</head>
<body ng-app="ngAnimate">


<div>


<button ng-model="clickedh">Click here</button>
  <button ng-model="clickede">here click</button>
  </div>

<div>
 <button ng-hide="true" ng-show="clickedh">show click here</button>
  <button ng-hide="true" ng-show="clickede">show here click</button>

</div>
</body>
</html>

但它不起作用我需要做什么？

【问题讨论】：

在第三个和第四个按钮中使用 ng-hide 或 ng-show。不要将代码“真实”。 Insted 在第一个和第二个按钮的单击事件中绑定 ng-hide 值（使用 ng-click）。这是有道理的。

标签： angularjs show-hide

【解决方案1】：

ng-hide 期待一个表达式，而不是一个值。如果您希望 ng-hide 通过使用“true”来评估为 true，那么您还需要将 true 用单引号括起来。

试试 ng-hide = "'true'"

然而，正确的做法是在作用域上放置一个变量。

所以你真的应该做这样的事情（可能在你的控制器中）：

$scope.show_me = true;

然后在您的模板中，您可以执行以下操作：

<div ng-show = "show_me">HI</div>
<div ng-hide = "!show_me">HI, I'm showing too! (because of the ! operator)</div>

然后在您的按钮中，您可以执行以下操作：

<button ng-click = "show_me = !show_me">Toggle the Thing</button>

【讨论】：

【解决方案2】：

试试看： 首先在脚本中初始化你的app module。然后你应该声明一个控制器，你将需要另一个操作。我已经使用 ng-init 来设置需要定义 show true/false 的每个变量的默认值（布尔值）。你可以从控制器中做到这一点。

var app = angular.module('ngAnimate', []); //init your app module
app.controller('myCtrl', function($scope) { // a controller
   
});

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ng-show-production</title>
        <link href="glyphicons.css" rel="stylesheet" type="text/css">
        <link href="animations.css" rel="stylesheet" type="text/css">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body ng-app="ngAnimate" ng-controller="myCtrl">
        <div>
            <button ng-init="clickedh=false" ng-click="clickedh=!clickedh">Click here</button>
            <button ng-init="clickede=false" ng-click="clickede=!clickede">here click</button>
        </div>
        <div>
            <button ng-show="clickedh">show click here</button>
            <button ng-show="clickede">show here click</button>
        </div>
      
    </body>
</html>

【讨论】：

【解决方案3】：

把你的按钮改成这个

<button ng-init="clickedh=false" ng-model="clickedh"  ng-click="clickedh=true">Click here</button>
  <button ng-model="clickede" ng-init="clickede=false" ng-click="clickede=true">here click</button>


<button ng-show="clickedh">show click here</button>
  <button ng-show="clickede">show here click</button>

不要同时使用ng-hide 和ng-show

如果您想避免使用ng-init，也可以从控制器中设置true 和false 值

FIDDLE

【讨论】：

【解决方案4】：

对于那些按钮的点击选项（点击这里和这里点击），我们需要在这些按钮的html上提供ng-click功能。

然后分别在点击第 1 或第 2 按钮时显示第 3 或第 4 按钮，我们必须为第 3 和第 4 按钮调用 ng-show。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>
  <link href="glyphicons.css" rel="stylesheet" type="text/css">
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>



</head>
<body ng-app="ngAnimate">
<p>This code is working fine :)</p>

<div>
<button ng-model="clickedh" ng-click="clickedh=true">Click here</button>
  <button ng-model="clickede"  ng-click="clickede=true">here click</button>
  </div>

<div>
 <button  ng-show="clickedh">show click here</button>
  <button ng-show="clickede">show here click</button>

</div>
</body>
</html>

【讨论】：

嗨，如果可能，请尝试在您的回答方法中添加描述。谢谢。

【解决方案5】：

试试这个方法：

<div ng-init="showButton=true"/>
<div ng-show="showText">Text</div>
<button ng-Click="showText=true;showButton=!showButton" ng-show="showButton">Show</button>
<button ng-Click="showText=false;showButton=!showButton" ng-show="!showButton">Hide</button>

希望有所帮助；）

【讨论】：