How to Show and Hide Element With Checkbox Status in Angularjs

Question

Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the #item-details and show it if check box checked or Hide if un-check

<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
  <div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>

<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Left</button>
       <button type="button" class="btn btn-default">Middle</button>
       <button type="button" class="btn btn-default">Right</button>
     </div>
  </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
   var app = angular.module('app', [])
   .controller('checkController', function() { });
    this.
});

</script>
  </body>
</html>

maddygoround · Accepted Answer · 2015-09-23 17:22:22Z

6

First assign an model to the check box

<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>

then simply assign the same model value to item-details in ng-show

<div class="col-md-6" id="item-details" ng-show="checked">

you are done

answered Sep 23, 2015 at 17:22

maddygoround

2,3102 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Suffii Over a year ago

Hi maddy I did you said ath this plnkr.co/edit/K9yHOF0at93ECuGPxjAy?p=preview but it still not working

Suffii Over a year ago

As I said I do not want to show the #item-details on load

maddygoround Over a year ago

look at your controller name , you are using wrong controller name in html you had define "checkController" and in angularjs you have create "mainController" ,just change the controller name and it will start working

maddygoround Over a year ago

there is a lot wrong in the plunkler you had wriiten ,i had updated it ,it is now working :D

Suffii Over a year ago

so we do not need to pass any thing in mainController? I mean any function or something?

|

robertk · Accepted Answer · 2015-09-23 17:33:55Z

Example

 var app = angular.module('app', []);
 app.controller('checkController', function($scope) {
    $scope.hide = false;
    $scope.checkboxClick = function() {
      $scope.hide = !$scope.hide;
    };

  });

HTML:

<body ng-app="app">
  <div ng-controller="checkController" class="container">
    <div class="row">
      <div class="col-md-2">
        <input type="checkbox" ng-click="checkboxClick()" value="new" name="item" /> Add New Item
        <br />
      </div>
      <div ng-show="hide" id="item-details" class="col-md-6">
        <div aria-label="..." role="group" class="btn-group">
          <button class="btn btn-default" type="button">Left</button>
          <button class="btn btn-default" type="button">Middle</button>
          <button class="btn btn-default" type="button">Right</button>
        </div>
      </div>
    </div>
  </div>
</body>

Alex Onozor · Accepted Answer · 2016-06-27 20:06:54Z

In one way or the other, the ng-show is not working but I use the ng-if as a work around which work perfectly.

<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
  <div class="col-md-2"><input type="checkbox" name="item" ng-model="item" value="new" />Add New Item <br /></div>

<div class="col-md-6" id="item-details" ng-if="item == true">
<div class="btn-group" role="group" aria-label="...">
       <button type="button" class="btn btn-default">Left</button>
       <button type="button" class="btn btn-default">Middle</button>
       <button type="button" class="btn btn-default">Right</button>
     </div>
  </div>
</div>
</div>

hope is helps thanks.

user3514663 · Accepted Answer · 2019-07-10 05:28:04Z

0

    <div class="container" ng-controller="checkController">
    <div class="row">
      <div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>

    <div class="col-md-6" id="item-details" ngshow = "checked == '1'">
    <div class="btn-gr`enter code here`oup" role="group" aria-label="...">
           <button type="button" class="btn btn-default">Left</button>
           <button type="button" class="btn btn-default">Middle</button>
           <button type="button" class="btn btn-default">Right</button>
         </div>
      </div>
    </div>
    </div>

Just do above

answered Jul 10, 2019 at 5:28

user3514663

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to Show and Hide Element With Checkbox Status in Angularjs

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related