Suffii Suffii - 2 years ago 175
AngularJS Question

How to Show and Hide Element With Checkbox Status in Angularjs

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

and show it if check box checked or Hide if un-check

<!DOCTYPE html>
<html ng-app="app">
<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>

<script src="">/script>
var app = angular.module('app', [])
.controller('checkController', function() { });


Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download