shaik2many/angular-demo.html

## angular-demo.html
<!doctype html>
<html ng-app>
    <head>

        <style>
            [ng-cloak], .ng-cloak {
                display: none !important;
            }
            .red {
                color: red;
            }
            .blue {
                color: blue;
            }
            table td {
                border: 1px solid green;
            }
        </style>
    </head>
    <body ng-init="data={fname:'Reyaz', isLoggedIn:'true', status:'blue', customers:[{name:'zakiya',city:'albany',orderTotal:200,joined:'1981-01-23'},{name:'reyaz',city:'chicago',orderTotal:100.949,joined:'1976-09-12'},{name:'furqan',city:'knoxville',orderTotal:300,joined:'2007-11-23'}]}">
        <div ng-cloak>
            <div ng-switch on="data.isLoggedIn" ng-class="data.status">
                <div ng-switch-when="true">I am logged in..</div>
                <div ng-switch-default>Please log in</div>
            </div>
            <input ng-model="data.fname" ng-hide="isHidden">
            {{data.fname}} -- or --- <span ng-bind="data.fname"></span>
            <input type="checkbox" ng-model="isHidden"/>
            <button ng-click="data.fname='zakiya'">Click Me</button>
        </div>

        <!-- ng-repeat demo -->
        <br><br><br>
        Customer Filter: <input type="text" ng-model="customerFilter.name">
        <div>
            <table>
                <tr>
                    <td ng-click="doSortBy='name';reverse=!reverse">Name</td>
                    <td ng-click="doSortBy='city';reverse=!reverse">City</td>
                    <td ng-click="doSortBy='orderTotal';reverse=!reverse">OrderTotal</td>
                    <td ng-click="doSortBy='joined';reverse=!reverse">Joined</td>
                </tr>
                <tr ng-repeat="cust in data.customers | orderBy:doSortBy:reverse | filter: customerFilter ">
                    <td>{{cust.name | uppercase}}</td>
                    <td>{{cust.city}}</td>
                    <td>{{cust.orderTotal | currency:'^'}}</td>
                    <td>{{cust.joined | date:'longDate'}}</td>
                </tr>
            </table>
            <ul>
                <li ng-repeat="cust in data.customers | orderBy: doSortBy | filter: customerFilter" >{{cust.name}} = {{cust.orderTotal | currency}}</li>
            </ul>
        </div>

        <script src="/js/bower_components/angular/angular.min.js"></script>
    </body>
</html>
	<!doctype html>
	<html ng-app>
	<head>

	<style>
	[ng-cloak], .ng-cloak {
	display: none !important;
	}
	.red {
	color: red;
	}
	.blue {
	color: blue;
	}
	table td {
	border: 1px solid green;
	}
	</style>
	</head>
	<body ng-init="data={fname:'Reyaz', isLoggedIn:'true', status:'blue', customers:[{name:'zakiya',city:'albany',orderTotal:200,joined:'1981-01-23'},{name:'reyaz',city:'chicago',orderTotal:100.949,joined:'1976-09-12'},{name:'furqan',city:'knoxville',orderTotal:300,joined:'2007-11-23'}]}">
	<div ng-cloak>
	<div ng-switch on="data.isLoggedIn" ng-class="data.status">
	<div ng-switch-when="true">I am logged in..</div>
	<div ng-switch-default>Please log in</div>
	</div>
	<input ng-model="data.fname" ng-hide="isHidden">
	{{data.fname}} -- or --- <span ng-bind="data.fname"></span>
	<input type="checkbox" ng-model="isHidden"/>
	<button ng-click="data.fname='zakiya'">Click Me</button>
	</div>

	<!-- ng-repeat demo -->
	<br><br><br>
	Customer Filter: <input type="text" ng-model="customerFilter.name">
	<div>
	<table>
	<tr>
	<td ng-click="doSortBy='name';reverse=!reverse">Name</td>
	<td ng-click="doSortBy='city';reverse=!reverse">City</td>
	<td ng-click="doSortBy='orderTotal';reverse=!reverse">OrderTotal</td>
	<td ng-click="doSortBy='joined';reverse=!reverse">Joined</td>
	</tr>
	<tr ng-repeat="cust in data.customers \| orderBy:doSortBy:reverse \| filter: customerFilter ">
	<td>{{cust.name \| uppercase}}</td>
	<td>{{cust.city}}</td>
	<td>{{cust.orderTotal \| currency:'^'}}</td>
	<td>{{cust.joined \| date:'longDate'}}</td>
	</tr>
	</table>
	<ul>
	<li ng-repeat="cust in data.customers \| orderBy: doSortBy \| filter: customerFilter" >{{cust.name}} = {{cust.orderTotal \| currency}}</li>
	</ul>
	</div>

	<script src="/js/bower_components/angular/angular.min.js"></script>
	</body>
	</html>