<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="Checked=true;Checked1=true;Checked2=true;Checked3=true">
Header<input type="checkbox" ng-model="Checked" />
Section<input type="checkbox" ng-model="Checked1" />
Footer<input type="checkbox" ng-model="Checked2" />
Read Only<input type="checkbox" ng-model="Checked3" />
<header ng-if="Checked" style="background-color:#b6ff00;width:100%;height:200px; margin:0 auto;"></header>
<section ng-if="Checked1" style="background-color: #ffd800;width:100%;height:700px; margin:0 auto;">
<div class="container">
<input type="text" ng-readonly="Checked3" class="form-control" />
<br />
<input type="text" ng-disabled="Checked3" class="form-control" />
<br />
<div class="container">
<div ng-init="employee=[{ID:1001,name:'ali',Department:'IT'} ,{ID:1002,name:'AHMED',Department:'MANAGER'},{ID:1003,name:'BASIT',Department:'HR'},{ID:1004,name:'salman',Department:'Software'}]">
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>DEPARTMENT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in employee">
<td>{{x.ID}}</td>
<td>{{x.name}}</td>
<td>{{x.Department}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<footer ng-if="Checked2" style="background-color:#ff0000;width:100%;height:200px; margin:0 auto;"></footer>
</div>
</body>
</html>
No comments:
Post a Comment