More-on-directives.html

<!doctype html>

<html ng-app>
<head>
    <title>More on Directives</title>
    <script src="angular.js"></script> 
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body 
 ng-init="data={name:'James', isVisible: true, loggedIn: true, status: 'navy'}">
    <div ng-cloak>
        <div ng-switch on = "data.loggedIn" ng-class = "data.status">
            <div ng-switch-when = "true">
                Welcome {{ data.name }}
            </div>
            <div ng-switch-default ng-class = "data.status">Login</div>
        </div>
        <br />
        <div ng-show="data.isVisible: false">
            Name: <input type="text" ng-model="data.name" /> 
            {{ data.name }}
        </div>
    </div>  
    
</body>
</html>