Question

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

1）点击这里

2）点击

3）（隐藏按钮）显示点击此处

4）（隐藏按钮）显示在这里点击

隐藏第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>

但它无法正常工作我需要做什么？

Answer 1

ng-hide期待表达式，而不是值。如果你想通过使用“true”将ng-hide评估为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>

Answer 2

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

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>

Answer 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

如果您想避免使用true

，还可以从控制器设置false和ng-init值

<强> FIDDLE

Answer 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>

Answer 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>

希望有所帮助;）

隐藏并显示按钮上的按钮单击angularjs

5 个答案: