making div visible or invisible depend on condition

Question

<div class="ddown">
    <button class="dbtn">ABC</button>
</div>

I want to make this div hide/show when a checkbox is checked/unchecked, how can I achieve this?

add `ng-show="isChecked"` to your div, with some logic that changes `$scope.isChecked` inside the controller — Aleksey Solovey, May 14 '18 at 09:34
Use `ng-if="isSelected"` on the `div` tag and set with checkbox `ng-model="isSelected"`. — Avnesh Shakya, May 14 '18 at 09:36
Possible duplicate of [how to show/hide a div on the basis of a checkbox selection in angular js](https://stackoverflow.com/questions/21748594/how-to-show-hide-a-div-on-the-basis-of-a-checkbox-selection-in-angular-js) — Nandita Sharma, May 14 '18 at 09:41
Possible duplicate of [AngularJS: ng-show / ng-hide](https://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide) — Ramesh Rajendran, May 14 '18 at 10:48
@RameshRajendran , This might be same for ng-show/ ng-hide but i did not ask for ng-show/ng-hide and i am doing anything in angular for first time ..please remove Duplicate of .. — user3756799, May 14 '18 at 10:50

score 3 · Accepted Answer · answered May 14 '18 at 09:41

3

try The following code

<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
    <button class="dbtn">ABC</button>
</div>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
    Check to show/Hide a div:
    <input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
    <button class="dbtn">ABC</button>
</div>  
</body>
</html>

answered May 14 '18 at 09:41

Faraz

644
4
13

@here is the best solution of your problem.. try this i am sure this will help for you – Faraz May 14 '18 at 09:42
@user3756799 is this answer helpful for you. – Faraz May 14 '18 at 13:06
yes..it helps me ..thanks – user3756799 May 15 '18 at 10:31

sebu · Answer 2 · 2018-05-14T10:01:18.660

2

html

<input type="checkbox" ng-model="isChecked" />
<div ng-show="isChecked" class="ddown">
   <button class="dbtn">ABC</button>
</div>

edited May 14 '18 at 10:01

answered May 14 '18 at 09:40

sebu

2,546
1
22
40

score 0 · Answer 3 · answered May 14 '18 at 10:47

0

Try with using ng-if to avoiding DOM element creation.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
    <input type="checkbox" ng-model="isChecked">
<div class="ddown" ng-if="isChecked">
    <button class="dbtn">ABC</button>
</div>  
</body>
</html>

answered May 14 '18 at 10:47

Ramesh Rajendran

35,211
40
143
222

ng-if creates a scope of it's own which sometimes create problems! ng-show is the better option here, don't you think? – Shaheryar.Akram May 14 '18 at 11:08

making div visible or invisible depend on condition

3 Answers3