2

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>

4 Answers 4

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

9
  • Hi maddy I did you said ath this plnkr.co/edit/K9yHOF0at93ECuGPxjAy?p=preview but it still not working
    – Suffii
    Sep 23, 2015 at 17:26
  • As I said I do not want to show the #item-details on load
    – Suffii
    Sep 23, 2015 at 17:26
  • 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 Sep 23, 2015 at 17:28
  • there is a lot wrong in the plunkler you had wriiten ,i had updated it ,it is now working :D Sep 23, 2015 at 17:30
  • so we do not need to pass any thing in mainController? I mean any function or something?
    – Suffii
    Sep 23, 2015 at 17:35
3

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>
1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.