angularJs和bootstarp的使用

最新推荐文章于 2024-05-07 21:57:37 发布
JackMaster_xh
最新推荐文章于 2024-05-07 21:57:37 发布
阅读量611
点赞数
分类专栏： Bootstrap的掌握
本文链接：https://blog.csdn.net/JackMaster_xh/article/details/76228129
版权
Bootstrap的掌握专栏收录该内容
3 篇文章 0 订阅
订阅专栏
	<body ng-app="empApp" ng-controller="EmpAppController">
  	
  	<!-- 删除用的模态框 -->
  	<div id="deleteEmpModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	  <div class="modal-dialog modal-sm" role="document">
	    <div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">是否确认要删除该数据?</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-danger">确定</button>
				</div>
	    </div>
	  </div>
	</div>

  	<!--修改用的模态框  -->
	<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改员工</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
							<div class="col-sm-6">
								<input type="hidden" name="emp_id">
								<input type="text" class="form-control" id="inputEmpName2"
									name="emp_name" placeholder="请输入员工姓名">
							</div>
						</div>
						<div class="form-group">
							<label for="inputGender" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-6">
								<label class="radio-inline"> <input type="radio"
									name="gender" value="男" checked> 男 </label> <label
									class="radio-inline"> <input type="radio" name="gender"
									value="女"> 女 </label>
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmail"
									name="email" placeholder="请输入员工邮箱">
							</div>
						</div>

						<div class="form-group">
							<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
							<div class="col-sm-3">
								<select class="form-control" name="dept.dept_id">
								</select>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="updateEmpBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
  	<!--新增用的模态框  -->
	<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加员工</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmpName"
									name="emp_name" placeholder="请输入员工姓名">
								<span class="help-block"></span>
							</div>
						</div>
						
						
						<div class="form-group">
							<label for="inputGender" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-6">
								<label class="radio-inline"> <input type="radio"
									name="gender" value="男" checked> 男 </label> <label
									class="radio-inline"> <input type="radio" name="gender"
									value="女"> 女 </label>
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmail"
									name="email" placeholder="请输入员工邮箱">
							</div>
						</div>

						<div class="form-group">
							<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
							<div class="col-sm-3">
								<select  class="form-control" name="dept.dept_id">
									<option ng-repeat="d in deptList" value="d.dept_id">{{d.dept_name}}</option>
								</select>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveEmpBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>


  	<div class="container">
  		
  		<div class="row">
  			<div class="col-md-6 col-md-offset-3">
  				<h1>员工信息管理</h1>
  			</div>
  		</div> 
  		<div class="row">
  			<div class="col-md-2 col-md-offset-10">
  				<!-- 禁用按钮：disabled="disabled" -->
  				<button id="addEmpBtn" ng-click="showAddModal()" class="btn btn-success btn-lg" >
  					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
  					新增
  				</button>
  			</div>
  		</div>
  		<div class="row">
    		<div class="col-md-10 col-md-offset-1">
		    	<table id="empTable" class="table  table-hover">
		    		<tr>
		    			<td>id</td>
		    			<td>员工姓名</td>
		    			<td>性别</td>
		    			<td>邮箱</td>
		    			<td>所属部门</td>
		    			<td>操作</td>
		    		</tr>
		    		<tr ng-repeat="emp in empList">
		    			<td>{{emp.emp_id }}</td>
		    			<td>{{emp.emp_name}}</td>
		    			<td>{{emp.gender}}</td>
		    			<td>{{emp.email}}</td>
		    			<td>{{emp.dept.dept_name}}</td>
		    			<td>
		    				<button class="btn btn-primary editEmpBtn">
		    					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
		    					修改
		    				</button>

		    				<button class="btn btn-danger delEmpBtn">
		    					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
		    					删除
		    				</button>
		    			</td>
		    		</tr>
		    		
		    	</table>
    		</div>
    	</div>
    	
    	<!-- 分页条 -->
    	<div class="row">
    		<div class="col-md-6">共有{{pageInfo.total}}条数据,共有{{pageInfo.pages}}页</div>
    		
   			<nav aria-label="Page navigation">
			  <ul class="pagination">
			  	<li ng-show="pageInfo.hasPreviousPage"><a href="#" ng-click="toPage(1)">首页</a></li>
			  	<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="#" >首页</a></li>
			    <li>
			      <a ng-show="pageInfo.hasPreviousPage" href="#" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
			        <span aria-hidden="true">«</span>
			      </a>
			    </li>
			    <li>
			      <a ng-hide="pageInfo.hasPreviousPage" href="#"  aria-label="Previous" class="disabled">
			        <span aria-hidden="true">«</span>
			      </a>
			    </li>
			    <li ng-repeat="num in pageInfo.navigatepageNums" ng-class="num==pageInfo.pageNum?'active':''">
			    	<a href="#" ng-click="toPage(num)">{{num}}</a>
			    </li>
			    <li>
			      <a href="#" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
			        <span aria-hidden="true">»</span>
			      </a>
			    </li>
			    <li><a href="#" ng-click="toPage(pageInfo.pages)">尾页</a></li>
			  </ul>
			</nav>
    	</div>
    	
  	</div>
    
    
  </body>


angular的使用

<script type="text/javascript">
	//创建模块
		var empApp = angular.module("empApp",[]);
		
		//创建控制器
		empApp.controller("EmpAppController",["$scope","$http",function($scope,$http){
			//跳转到指定页码
			$scope.toPage = function(num){
				//发送http请求
			    $http({
			        url:"emp/selectPageJson?pageno="+num,
			        method:"GET"
			    }).then(function successCallback(response) {
			          // console.log(response.data);
			          $scope.pageInfo = response.data.data.pageInfo;
			          //定义员工数据列表模型
			          $scope.empList = $scope.pageInfo.list;
			    });
			    
			};
			
			//默认跳转到第1页
			$scope.toPage(1);
			
			//加载部门列表
			$scope.loadDepts = function(){
				$http({
			        url:"emp/selectDepts",
			        method:"GET"
			    }).then(function successCallback(response) {
			    	$scope.deptList = response.data;
			    	//console.log($scope.deptList);
			    });
			};
			
			//定义显示新增模态框的函数
			$scope.showAddModal = function(){
				//加载部门列表
				$scope.loadDepts();
				//打开模态框
				angular.element("#addEmpModal").modal("show");
			};
		}]);