U-L U-L - 11 days ago 7
AngularJS Question

How to hide and show a div, based on model condition in angularjs?

I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?

<div ng-app='visibleApp'>
<div ng-controller='myController'>
<input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
<div ng-show="{{!hideBasicInfo}}">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" ng-model="firstName"/></br>

<label for="middleName">Middle Name:</label>
<input type="text" name="middleName" ng-model="middleName"/></br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" ng-model="lastName"/>
</div>
<hr/>
<div>
<h4>Debug Information</h4>
hideBasicInfo: {{hideBasicInfo}}<br/>
!hideBasicInfo: {{!hideBasicInfo}}
</div>
</div>
</div>


JS file:

var visibleApp = angular.module('visibleApp',[]);

visibleApp.controller('myController', function($scope){
$scope.data = "my data";
$scope.hideBasicInfo = false;
});


Thank you.

See fiddle

Answer

almost there...

 <div ng-hide="hideBasicInfo">
    ...
 </div>

no template braces ( {{}} ) needed.