Post
Ask Question

Creating a Bootstrap Form with AngularJS

Angularjs form Users
  1. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
  2.     <title>JsonFormData</title>  
  3.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />  
  4.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
  5.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>  
  6.     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>  
  7.     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">  
  8.         <script src="Scripts/UserJson.js" type="text/javascript"></script>  
  9.         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  10.         <style type="text/css">  
  11. body {  
  12.   
  13. }  
  14. .table-hover tbody tr:hover td  
  15. {  
  16. background-color: #E9E6E7;  
  17. color: #FF5F5F;  
  18. font-size: 14px;  
  19. font-family: Times New Roman;  
  20. font-variant: small-caps;  
  21. }  
  22. .table-hover thead tr:hover th  
  23. {  
  24. background-color: #DADAE6;  
  25. color: Blue;  
  26. font-size: 15px;  
  27. font-family: Times New Roman;  
  28. }  
  29. .table   
  30. {  
  31. background-color:#EBC299;  
  32. table-layout:80%;  
  33. }  
  34. #myForm  
  35. {  
  36. background: #333;  
  37. color:Red;   
  38. float: left;  
  39. border-style: none;  
  40. border-color: Silver;  
  41. padding: 15px;  
  42. height: 500px;  
  43. width: 600px;  
  44. border-top-left-radius: 2em;  
  45. border-bottom-left-radius: 2em;  
  46. border-top-right-radius: 2em;  
  47. border-bottom-right-radius: 2em;  
  48. font-family: Times New Roman;  
  49. }  
  50. #advertisement  
  51. {  
  52. background: #333;  
  53. color:Red;   
  54. float: left;  
  55. border-style: none;  
  56. border-color: Silver;  
  57. padding: 15px;  
  58. height: 500px;  
  59. width: 600px;  
  60. margin-left:10px;  
  61. border-top-left-radius: 2em;  
  62. border-bottom-left-radius: 2em;  
  63. border-top-right-radius: 2em;  
  64. border-bottom-right-radius: 2em;  
  65. font-family: Times New Roman;  
  66. }  
  67. #advertisement1  
  68. {  
  69. background: #333;  
  70. color:Red;   
  71. float: left;  
  72. border-style: none;  
  73. border-color: Silver;  
  74. padding: 15px;  
  75. height: 500px;  
  76. width: 600px;  
  77. margin-left:10px;  
  78. border-top-left-radius: 2em;  
  79. border-bottom-left-radius: 2em;  
  80. border-top-right-radius: 2em;  
  81. border-bottom-right-radius: 2em;  
  82. font-family: Times New Roman;  
  83. }  
  84. </style>  
  85.     </asp:Content>  
  86.     <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">  
  87.         <div ng-controller="userController" ng-app="myApp">  
  88.             <div class="container">  
  89.                 <div class="hideeee" name="myhide" ng-show="edit3" ng-hide="false">  
  90.                     <button type="button" class="btn btn-success" ng-click="editUser()" style="margin-left: 980px;  
  91. margin-top: 7px">  
  92.                         <span class="glyphicon glyphicon-user"></span>Create New User  
  93.   
  94.                     </button>  
  95.                     <label id="msgLab" style="color: #008080; font-size: large"></label>  
  96.                     <br />  
  97.                     <hr />  
  98.                     <div class="manish">  
  99.                         <h3>  
  100. Users</h3>  
  101.                         <div class="navbar-form" role="search">  
  102.                             <div class="input-group add-on">  
  103.                                 <input ng-model="search" ng-keydown="clear()" placeholder="Search" name="srch-term"  
  104. id="search" class="form-control" type="text">  
  105.                                     <div class="input-group-btn">  
  106.                                         <button class="btn btn-default" type="submit" ng-click="sear()">  
  107.                                             <i class="glyphicon glyphicon-search"></i>Search  
  108.                                         </button>  
  109.                                     </div>  
  110.                                 </div>  
  111.                             </div>  
  112.                         </div>  
  113.                         <pagination style="margin-left: 850px;" total-items="totalItems" items-per-page="itemsPerPage"  
  114. ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" boundary-links="true"  
  115. previous-text="‹" next-text="›" first-text="«" last-text="»"></pagination>  
  116.                         <br />  
  117. [   
  118.                         <a href="" ng-click="Btn=''">Reset</a> ]  
  119.   
  120.                         <table class="table table-striped table-bordered table-condensed table-striped table-hover ">  
  121.                             <thead>  
  122.                                 <th>Id</th>  
  123.                                 <th>  
  124.                                     <a href="" ng-click="Btn = 'firstName'; reverse=true"></a>  
  125.                                     <a href="" ng-click="Btn = '-firstName'; reverse=true">  
  126. First Name</a>  
  127.                                 </th>  
  128.                                 <th class="text-center">  
  129.                                     <a href="" ng-click="Btn = 'lastName'; reverse=true"></a>  
  130.                                     <a href="" ng-click="Btn = '-lastName'; reverse=true">  
  131. Last Name</a>  
  132.                                 </th>  
  133.                                 <th class="text-center">  
  134.                                     <a href="" ng-click="Btn = 'phone'; reverse=true"></a>  
  135.                                     <a href="" ng-click="Btn = '-phone'; reverse=true">  
  136. Phone</a>  
  137.                                 </th>  
  138.                                 <th class="text-center">  
  139. Image  
  140. </th>  
  141.                                 <th class="text-center">  
  142. Action  
  143. </th>  
  144.                             </thead>  
  145.                             <tbody>  
  146.                                 <tr style="color: #7A2900" data-ng-repeat="user in users | filter:search | orderBy:Btn:reverse">  
  147.                                     <td>  
  148. {{user.id }}  
  149. </td>  
  150.                                     <td>  
  151. {{user.firstName }}  
  152. </td>  
  153.                                     <td>   
  154. {{user.lastName }}  
  155. </td>  
  156.                                     <td>   
  157. {{user.phone }}  
  158. </td>  
  159.                                     <td class="text-center">  
  160.                                         <img alt="Responsive image" class="img-circle col-xs-10 col-md-10" ng-src="upload/{{user.photo}}"  
  161. height="100px" width="100px" />  
  162.                                     </td>  
  163.                                     <td class="text-center">  
  164.                                         <a href="#" class="btn btn-primary" ng-click="edit(user.id)">  
  165.                                             <span class="glyphicon glyphicon-pencil"></span>Edit  
  166.                                         </a> |   
  167.                                         <a href="#" class="btn btn-danger" ng-click="del(user.id)">  
  168.                                             <span  
  169. class="glyphicon glyphicon-remove"></span>Delete  
  170.                                         </a>  
  171.                                     </td>  
  172.                                 </tr>  
  173.                             </tbody>  
  174.                         </table>  
  175.                         <p id="hide" style="font-size:x-large; color:Red;"></p>  
  176.                         <p ng-hide="true">  
  177. total Items: {{totalItems}}  
  178.                             <br />  
  179. Items per page: {{itemsPerPage}}  
  180.                             <br />  
  181. Current Page: {{currentPage}}  
  182.   
  183.                         </p>  
  184.                     </div>  
  185.                 </div>  
  186.                 <div class="form-horizontal" id="myForm" name="myForm" ng-show="edit2" ng-hide="true">  
  187.                     <h3 ng-show="edit1" ng-hide="false">  
  188. Create New User:</h3>  
  189.                     <h3 ng-show="edit11" ng-hide="true"">  
  190. Edit User:</h3>  
  191.                     <div class="form-group" ng-show="edit5" ng-hide="true">  
  192.                         <label class="col-sm-2 control-label">ID:</label>  
  193.                         <div class="col-sm-10" ng-hide="true">  
  194.                             <input type="text" id="id" name="id" ng-model="id"/>  
  195.                         </div>  
  196.                     </div>  
  197.                     <div class="form-group" ng-show="edit5" ng-hide="false">  
  198.                         <label class="col-sm-3 control-label">  
  199. First Name:</label>  
  200.                         <div class="col-sm-5">  
  201.                             <input type="text" id="fname" name="fName" ng-model="fName" placeholder="First Name" class="form-control" />  
  202.                         </div>  
  203.                     </div>  
  204.                     <div class="form-group" ng-show="edit5" ng-hide="false">  
  205.                         <label class="col-sm-3 control-label">  
  206. Last Name:</label>  
  207.                         <div class="col-sm-5">  
  208.                             <input type="text" id="lname" name="lname" ng-model="lName" placeholder="Last Name" class="form-control" />  
  209.                         </div>  
  210.                     </div>  
  211.                     <div class="form-group" ng-show="edit5" ng-hide="false">  
  212.                         <label class="col-sm-3 control-label">  
  213. Phone Number:</label>  
  214.                         <div class="col-sm-5">  
  215.                             <input type="text" id="phone" name="phone" ng-model="phone" placeholder="Phone Number" class="form-control" />  
  216.                         </div>  
  217.                     </div>  
  218.                     <div class="form-group" ng-show="edit7" ng-hide="false">  
  219.                         <label class="col-sm-3 control-label" >  
  220. Image:</label>  
  221.                         <div class="col-sm-5">  
  222.                             <input class="file" type="file" file-model="myFile" id="myFile"/>  
  223.                             <button type="button" ng-click="uploadFile()" class="btn btn-primary">  
  224.                                 <span class="glyphicon glyphicon-upload"> Upload File</span>  
  225.                             </button>  
  226.                             <br />  
  227.                         </div>  
  228.                     </div>  
  229.                     <div class="col-sm-20" ng-show="remove" ng-hide="true" style="margin-left:150px">  
  230.                         <img id="getimg" height="200px" width="200px" class="img-thumbnail col-xs-10 col-md-5" alt="Responsive image"/>  
  231.                         <button type="button" class="btn btn-info" id="Remov" ng-click="removefile()" ng-show="remove1" ng-hide="false">  
  232.                             <span  
  233. class="glyphicon glyphicon-remove"></span>Remove  
  234.                         </button>  
  235.                     </div>  
  236.                     <div class="form-group" style="margin-left:300px">  
  237.                         <input type="text" id="hid" name="hid" ng-model="hid" ng-hide="true" />  
  238.                     </div>  
  239.                     <button type="button" class="btn btn-primary" ng-click="SaveData()" style="margin-left:200px">  
  240.                         <span class="glyphicon glyphicon-save"></span>Save Data  
  241.   
  242.                     </button>  
  243.                     <button type="button" id="cbtn" class="btn btn-danger" ng-click="cancel()">  
  244.                         <span class="glyphicon glyphicon-cancel"></span>Cancel  
  245.   
  246.                     </button>  
  247.                     <br />  
  248.                     <br />  
  249.                 </div>  
  250.                 <div id="advertisement" ng-show="adv" ng-hide="true">  
  251.                     <center>Advertisement</center>  
  252.                     <img att="grfg" src="Images/adv/add.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />  
  253.                 </div>  
  254.                 <div id="advertisement1" ng-show="adv1" ng-hide="true">  
  255.                     <center>Advertisement_1</center>  
  256.                     <img att="grfg" src="Images/adv/edit.png" height="400" width="350" style="margin-left:120px; margin-top:20px;" />  
  257.                 </div>  
  258.         </div>  
  259. </asp:Content>