Angularjs form Users
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>JsonFormData</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/UserJson.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {
}
.table-hover tbody tr:hover td
{
background-color: #E9E6E7;
color: #FF5F5F;
font-size: 14px;
font-family: Times New Roman;
font-variant: small-caps;
}
.table-hover thead tr:hover th
{
background-color: #DADAE6;
color: Blue;
font-size: 15px;
font-family: Times New Roman;
}
.table
{
background-color:#EBC299;
table-layout:80%;
}
#myForm
{
background: #333;
color:Red;
float: left;
border-style: none;
border-color: Silver;
padding: 15px;
height: 500px;
width: 600px;
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
font-family: Times New Roman;
}
#advertisement
{
background: #333;
color:Red;
float: left;
border-style: none;
border-color: Silver;
padding: 15px;
height: 500px;
width: 600px;
margin-left:10px;
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
font-family: Times New Roman;
}
#advertisement1
{
background: #333;
color:Red;
float: left;
border-style: none;
border-color: Silver;
padding: 15px;
height: 500px;
width: 600px;
margin-left:10px;
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
font-family: Times New Roman;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div ng-controller="userController" ng-app="myApp">
<div class="container">
<div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">
<button type="button" class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;
margin-top: 7px">
<span class="glyphicon glyphicon-user"></span>Create New User
</button>
<label id="msgLab" style="color: #008080; font-size: large"></label>
<br />
<hr />
<div class="manish">
<h3>
Users</h3>
<div class="navbar-form" role="search">
<div class="input-group add-on">
<input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term"
id="search" class="form-control" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="sear()">
<i class="glyphicon glyphicon-search"></i>Search
</button>
</div>
</div>
</div>
</div>
<pagination style="margin-left: 850px;" total-items="totalItems" items-per-page="itemsPerPage"
ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" boundary-links="true"
previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>
<br />
[
<a href="" ng-click="Btn=''">Reset</a> ]
<table class="table table-striped table-bordered table-condensed table-striped table-hover ">
<thead>
<th>Id</th>
<th>
<a href="" ng-click="Btn = 'firstName'; reverse=true"></a>
<a href="" ng-click="Btn = '-firstName'; reverse=true">
First Name</a>
</th>
<th class="text-center">
<a href="" ng-click="Btn = 'lastName'; reverse=true"></a>
<a href="" ng-click="Btn = '-lastName'; reverse=true">
Last Name</a>
</th>
<th class="text-center">
<a href="" ng-click="Btn = 'phone'; reverse=true"></a>
<a href="" ng-click="Btn = '-phone'; reverse=true">
Phone</a>
</th>
<th class="text-center">
Image
</th>
<th class="text-center">
Action
</th>
</thead>
<tbody>
<tr style="color: #7A2900" data-ng-repeat="user in users | filter:search | orderBy:Btn:reverse">
<td>
{{user.id }}
</td>
<td>
{{user.firstName }}
</td>
<td>
{{user.lastName }}
</td>
<td>
{{user.phone }}
</td>
<td class="text-center">
<img alt="Responsive image" class="img-circle col-xs-10 col-md-10" ng-src="upload/{{user.photo}}"
height="100px" width="100px" />
</td>
<td class="text-center">
<a href="#" class="btn btn-primary" ng-click="edit(user.id)">
<span class="glyphicon glyphicon-pencil"></span>Edit
</a> |
<a href="#" class="btn btn-danger" ng-click="del(user.id)">
<span
class="glyphicon glyphicon-remove"></span>Delete
</a>
</td>
</tr>
</tbody>
</table>
<p id="hide" style="font-size:x-large; color:Red;"></p>
<p ng-hide="true">
total Items: {{totalItems}}
<br />
Items per page: {{itemsPerPage}}
<br />
Current Page: {{currentPage}}
</p>
</div>
</div>
<div class="form-horizontal" id="myForm" name="myForm" ng-show="edit2" ng-hide="true">
<h3 ng-show="edit1" ng-hide="false">
Create New User:</h3>
<h3 ng-show="edit11" ng-hide="true"">
Edit User:</h3>
<div class="form-group" ng-show="edit5" ng-hide="true">
<label class="col-sm-2 control-label">ID:</label>
<div class="col-sm-10" ng-hide="true">
<input type="text" id="id" name="id" ng-model="id"/>
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
First Name:</label>
<div class="col-sm-5">
<input type="text" id="fname" name="fName" ng-model="fName" placeholder="First Name" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Last Name:</label>
<div class="col-sm-5">
<input type="text" id="lname" name="lname" ng-model="lName" placeholder="Last Name" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit5" ng-hide="false">
<label class="col-sm-3 control-label">
Phone Number:</label>
<div class="col-sm-5">
<input type="text" id="phone" name="phone" ng-model="phone" placeholder="Phone Number" class="form-control" />
</div>
</div>
<div class="form-group" ng-show="edit7" ng-hide="false">
<label class="col-sm-3 control-label" >
Image:</label>
<div class="col-sm-5">
<input class="file" type="file" file-model="myFile" id="myFile"/>
<button type="button" ng-click="uploadFile()" class="btn btn-primary">
<span class="glyphicon glyphicon-upload"> Upload File</span>
</button>
<br />
</div>
</div>
<div class="col-sm-20" ng-show="remove" ng-hide="true" style="margin-left:150px">
<img id="getimg" height="200px" width="200px" class="img-thumbnail col-xs-10 col-md-5" alt="Responsive image"/>
<button type="button" class="btn btn-info" id="Remov" ng-click="removefile()" ng-show="remove1" ng-hide="false">
<span
class="glyphicon glyphicon-remove"></span>Remove
</button>
</div>
<div class="form-group" style="margin-left:300px">
<input type="text" id="hid" name="hid" ng-model="hid" ng-hide="true" />
</div>
<button type="button" class="btn btn-primary" ng-click="SaveData()" style="margin-left:200px">
<span class="glyphicon glyphicon-save"></span>Save Data
</button>
<button type="button" id="cbtn" class="btn btn-danger" ng-click="cancel()">
<span class="glyphicon glyphicon-cancel"></span>Cancel
</button>
<br />
<br />
</div>
<div id="advertisement" ng-show="adv" ng-hide="true">
<center>Advertisement</center>
<img att="grfg" src="Images/adv/add.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />
</div>
<div id="advertisement1" ng-show="adv1" ng-hide="true">
<center>Advertisement_1</center>
<img att="grfg" src="Images/adv/edit.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />
</div>
</div>
</asp:Content>