CODEWITHSUNDEEP
angularjs
Mat.Now
Mat.Now

Reputation: 1725

ng-show, only show but don't hide element if click again

var app=angular.module('app',[]);
.box
{
width:50px;
height:50px;
background-color:red;
}
span
{
position:absolute;
left:190px;
top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input ng-click="showBox =! showBox" placeholder="Click me"/>
  <div class="box" ng-show="showBox"></div>
  <span>Hide box</span>
</div>

Hey, I have one question for very new AngularJS users. This is only exapmle but shows idea. When click in input red div will show,but if you click again div hide. But I don't want that second click hide this div, I would like that click in Hide box hide div. I would like that click in input only show red div but don't hide if click again

Upvotes: 0

Views: 388

Answers (2)

Gonzalo.-
Gonzalo.-

Reputation: 12682

use

ng-click="showBox = true"

assuming it's initialized as false.

If you want to hide using the Hide Box use

<span ng-click="showBox = false">Hide box</span>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

just set it to true,

ng-click="showBox = true"

DEMO

var app=angular.module('app',[]);
app.controller("dobController", ["$scope",
  function($scope) {
  $scope.showBox =false;
  }
]);
.box
{
width:50px;
height:50px;
background-color:red;
}
span
{
position:absolute;
left:190px;
top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input ng-click="showBox = true" placeholder="Click me"/>
  <div class="box" ng-show="showBox"></div>
  <span>Hide box</span>
</div>

Upvotes: 1

Related Questions