Question

我有一个代码，当你点击它时，它应该显示一个弹出到div中心的代码。第一次弹出Hello div时点击它，但第二次点击它时没有任何反应。请帮助我！这是我的完整代码。这是index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.26/angular.js"></script>
  <script src="https://code.angularjs.org/1.2.26/angular-animate.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyController">
  <div style="height:200px; background-color: red; position:relative">
    <div id="cover" ng-click="show = true" ng-click="show = false">
      Cover
    </div>
    <div ng-show="show" ng-click="show = true" ng-click="show = false" class="slide">
      Hello
    </div>
  </div>
</body>
</html>

这是script.js

console.clear();

var app = angular.module('myApp', ['ngAnimate']);

app.controller('MyController', function ($scope) {
  $scope.show = false;
});

这是style.css

div#cover {
  background-color: lightblue;
  width: 90px;
  height: 30px;
  position: absolute;
  bottom: 0px;
  z-index: 10;
}
.slide {
  background-color: white;
  width: 90px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  z-index: 5;
  transition: 1s ease bottom !important;
  display: block !important;
}
.slide.ng-hide {
  bottom: 0;
}

Answer 1

删除所有div标记中的所有ng-click。只需复制ng-click下方ng-click而不是ng-click="show = show == false ? true : false"。

尝试使用三元运算符。

v23.0.1

工作演示：Plunker

Answer 2

我会尝试这样的事情：

＆＃13;

 $scope.changeShow = function (){
    $scope.var = ($scope.var === false) ? true : false;
  }

＆＃13;

<div ng-show="var" ng-init="var=true" class="slide">
      Hello
</div>
<input type="button" ng-click="changeShow()">

＆＃13;

ng-第一次单击后，单击不在angularjs中

2 个答案: