CODEWITHSUNDEEP
angularjsangularjs-ng-click
Blaze
Blaze

Reputation: 2329

ng-Click not working in angularjs after clicking for the first time

I have a code that should display a pop-up to the center of the div when you click on it. On clicking on it the first time it pops up the Hello div but on clicking on it the second time nothing happens. Please assist me! This is my complete code. This is the 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>

This is the script.js

console.clear();

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

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

This is the 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;
}

Upvotes: 2

Views: 3648

Answers (2)

Luis
Luis

Reputation: 56

I will try something like this:

 $scope.changeShow = function (){
    $scope.var = ($scope.var === false) ? true : false;
  }
<div ng-show="var" ng-init="var=true" class="slide">
      Hello
</div>
<input type="button" ng-click="changeShow()">

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Remove all ng-click in your all div tags. Just copy past my below ng-clickinstead of your ng-click.

try with using ternary operators.

ng-click="show = show == false ? true : false"

Working demo : Plunker

Upvotes: 1

Related Questions