var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p><a href="http://barnabas.tumblr.com/post/52003179711/angularjs-conditionals">These are the examples from my article here.</a></p>
<h3>
<label><input type="checkbox" ng-model="testBool1"/> Show/Hide Checkbox</label>
</h3>
<div>
<p ng-show="testBool1">It is checked.</p>
<p ng-hide="testBool1">It is not checked.</p>
</div>
<h3>
<label><input type="checkbox" ng-model="testBool2" /> Style Visibility Checkbox</label>
</h3>
<p>I am some content before.</p>
<p ng-style="{visibility: testBool2 && 'visible' || 'hidden'}">I am visible now.</p>
<p>I am some content after.</p>
<h3>Class Toggle</h3>
<style type="text/css">
.parent {border: 1px solid; padding: 1em;}
.parent.closed button {color: red;} /* stand-in for showing an up/down arrow or something*/
.parent.closed .child { display:none; }
</style>
<div class="parent" ng-class="{closed: isClosed}">
<button ng-click="isClosed=!isClosed">Toggle</button>
<p class="child">Conditionally displayed content</p>
</div>
<h3>Switch Edit Modes: Editing = {{!!isEditing}}</h3>
<div ng-switch="isEditing" ng-init="person = {first: 'Bob', last: 'Jones'}">
<form ng-switch-when="true">
<label>First Name: <input type="text" ng-model="person.first" /></label>
<br /><label>Last Name: <input type="text" ng-model="person.last" /></label>
<br /><button ng-click="$parent.isEditing=false">Save</button>
</form>
<div ng-switch-default>
<span>The person is {{person.first + ' ' + person.last}}</span>
<br /><button ng-click="$parent.isEditing=true">Edit</button>
</div>
</div>
</body>
</html>
/* Put your css in here */