angularJS 实例

最新推荐文章于 2020-12-20 17:18:06 发布
最新推荐文章于 2020-12-20 17:18:06 发布
阅读量665 收藏
点赞数 1
分类专栏： java编程 文章标签： angularjs jsp 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shzy1988/article/details/50433463
版权

angularJS语法不细说，百度一大堆，直接上代码，以后查看方便，快速上手

注意：angularJS中的代码顺序是有要求的，里面的function前后顺序很重要！

1.jsp页面中的语法，此页面只保留和angularJS有关代码，其他删掉了

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="taglib.jsp" %>
<!doctype html>
<html>
	<head>
		<title>证照输入终端</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
		<script src="../js/jquery.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/angular.min.js"></script>
		<script src="../js/itemSort.js"></script>
	</head>

	<body ng-app="itemSortApp" ng-controller="itemSortCtrl" onselectstart="return false">
		<input type="hidden" id="usertype" value="${usertype }"  ng-model="formData.usertype"/>
		<div class="bd-head">
		   	<div class="search" data-target="#myModal" data-toggle="modal">
			 	<select style="cursor:pointer" disabled="" class="form-control pull-right">
			      	<option><span  ng-model="formData.areaname">{{formData.areaname}}</span></option>
		    	</select>
		     	<div class="layer-sle"></div>
		  	</div>
	 	</div>
      
		<ul id="myTab" class="l-zhuti" >
       		<div ng-if="sortList == null || sortList == ''">
       		 	<li ><a style="background:url(../img/sort/{{sort.SORTCODE}}.png) no-repeat;"   data-toggle="tab">暂无内容</a></li>
       		</div>
       		<div ng-repeat="sort in sortList">
           		<li  class="memu1"  ><!--style="background:url(../img/sort/440306{{sort.SORTCODE}}.png) no-repeat;"  -->
           			<a style="background:url(../img/sort/{{sort.SORTCODE}}.png) no-repeat;" href="#menu1a" data-toggle="tab" ng-click="getItemsBySortcode(sort)">{{sort.SORTNAME}}</a>
           		</li>
          	</div>
       	</ul>
    
		<h3 class="tit2" id="titlelH3">{{formData.sortname_param}}<small class="pull-right" >点击展开查看详情</small></h3>
       	<ul class="p-list" id="itemListUl">
       		<li ng-if="itemList == null || itemList == ''" style="background: transparent;"><a >暂无你要办理的事项</a></li>
        	<li ng-repeat="item in itemList">
        		<a href="#'" ng-click="doWork(item)">{{item.SXZXNAME}}</a>
        	</li>
        </ul>
      
		<div class="panel" ng-if="allSortList == null">
       		<h3 class="tit2 tit-pro" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{sort.SORTCODE}}" aria-expanded="true" aria-controls="collapse{{sort.SORTCODE}}">
       			暂无内容
       		</h3>
       	</div>
        <div class="panel" ng-repeat="sort in allSortList">
            <div role="tab" id="heading{{sort.SORTCODE}}" ng-click="getAllItemsBySortcode(sort)"  >
              	<h3 class="tit2 tit-pro" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{sort.SORTCODE}}" aria-expanded="true" aria-controls="collapse{{sort.SORTCODE}}">
              	<div style="background: url(../img/sort/{{sort.SORTCODE}}.png) no-repeat;position: absolute;top:-6px;left:-60px;width: 70px;height: 70px;background-size: cover;"></div>
              	<div style="display: inline-block;">	{{sort.SORTNAME}}</div>
               	<small class="pull-right">点击展开查看详情</small>
              	</h3>
            </div>
            <ul ng-if="$index == 0" class="p-list ml50 panel-collapse collapse in" id="collapse{{sort.SORTCODE}}"  role="tabpanel" aria-labelledby="heading{{sort.SORTCODE}}"  >
            	<li ng-repeat="item in allItemList">
            		<a href='#'  ng-click="doWork(item)" >{{ item.SXZXNAME }}</a>
            	</li>
            </ul>
            <ul ng-if="$index != 0" class="p-list ml50 panel-collapse collapse" id="collapse{{sort.SORTCODE}}"  role="tabpanel" aria-labelledby="heading{{sort.SORTCODE}}"  >
            	<li ng-repeat="item in allItemList">
            		<a href='#'  ng-click="doWork(item)" >{{ item.SXZXNAME }}</a>
            	</li>
            </ul>
        </div>
      			
		<div class="col-xs-4" ng-repeat="region in regionList"> 
    		<span data-dismiss="modal" ng-click="changeAreaid(region.AREAID,region.AREANAME);" >{{region.AREANAME}}</span>
    	</div>
   		<span class="btn btn-lg btn-primary" data-dismiss="modal" ng-click="changeAreaid('440306','宝安区');" >宝安区</span>
	</body>
</html>

2.js代码 

var itemSortApp = angular.module("itemSortApp",[]);
itemSortApp.controller("itemSortCtrl",function($scope,$http,$compile){
	$scope.formData={areaid:"440306001",areaname:"西乡街道"};
	//查询事项
	$http({
        method:'POST',
        url: '../item/getPermByPermname.do',
        data: $.param($scope.formData), 
        headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
    }).success(function(response) {
    	$scope.itemList = response.ReturnValue;
    	$(".com-load").fadeOut();
    });
	$scope.searchItems=function(){
		$(".com-load").fadeIn();
		$http({
	        method:'POST',
	        url: '../item/getPermByPermname.do',
	        data: $.param($scope.formData), 
	        headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
	    }).success(function(response) {
	    	$scope.itemList = response.ReturnValue;
	    	$(".com-load").fadeOut();
	    });
	}
	//查询区域
	$http.get("../region/getRegionlistByParentid.do?timeStamp="+new Date().getTime()+"&parentid=440306")
		.success(function(response) {
			$scope.regionList = response.ReturnValue;
	});
	var usertype = $("#usertype").val();
	$scope.formData.usertype=usertype;
	if($scope.formData.usertype == "1"){
		//查询事项分类(个人)
		searchItemSort("001",$scope.formData.areaid);
		//查询全部分类
		searchAllItemSort("001","440306");
	}
	else if($scope.formData.usertype == "2"){
		//查询事项分类(企业)
		searchItemSort("002",$scope.formData.areaid);
		//查询全部分类
		searchAllItemSort("002","440306");
	}
	$scope.changeAreaid=function(areaid,areaname){
		$(".com-load").fadeIn();
		$scope.formData.areaid = areaid;
		$scope.formData.areaname = areaname;
		
		if($scope.formData.usertype == "1"){
			//查询事项分类(个人)
			searchItemSort("001",$scope.formData.areaid);
		}
		else if($scope.formData.usertype == "2"){
			//查询事项分类(企业)
			searchItemSort("002",$scope.formData.areaid);
		}
		
		
	};
	$scope.getItemsBySortcode=function(sortObj){
		$(".com-load").fadeIn();
		$(".l-zhuti").find("li").removeClass("active");
		if(sortObj != null){
			$scope.formData.sortname_param = sortObj.SORTNAME;
			$http.get("../sort/getPermlistBySortcode.do?timeStamp="+new Date().getTime()+"&sortcode="+sortObj.SORTCODE+"&areaid="+$scope.formData.areaid)
			.success(function(response) {
				$scope.itemList = response.ReturnValue;
				$(".com-load").fadeOut();
			});
		}
		else{
			$scope.itemList = null;
			$scope.formData.sortname_param="";
			$(".com-load").fadeOut();
		}
	};
	$scope.getAllItemsBySortcode=function(sortObj){
		if(sortObj != null){
			$http.get("../sort/getPermlistBySortcode.do?timeStamp="+new Date().getTime()+"&sortcode="+sortObj.SORTCODE+"&areaid=440306")
			.success(function(response) {
				$scope.allItemList = response.ReturnValue;
				if(null == $scope.allItemList || "" == $scope.allItemList ){
					var liHtml = "<li style='background:transparent;'><a>暂无你要办理的事项</a></li>";
					$("#collapse"+sortObj.SORTCODE).html(liHtml);
				}
			});
		}
	};
	$scope.doWork = function(item){
		debugger;
		//获取business.xml对应的数据，拼装成json对象
		var businessJson = {};
		businessJson.permid=item.ID;
		businessJson.largeitemid=item.LARGEITEMID;
		businessJson.smallitemid=item.SMALLITEMID;
		businessJson.smallitemname=item.SXZXNAME;
		businessJson.itemversion=item.ITEMVERSION;
		businessJson.itemlimittime=item.ITEMLIMITTIME;
		businessJson.itemlimitunit=item.ITEMLIMITUNIT;
		businessJson.regionid=item.REGIONID;
		businessJson.deptcode=item.DEPTID;
		businessJson.deptname=item.DEPTNAME;
		businessJson.lawaddr=item.LAWADDR;
		businessJson.realaddr=item.REALADDR;
		businessJson.status="1";
		businessJson.state="6";
		businessJson.applicantid=sessionStorage.getItem("userid");
		sessionStorage.setItem("businessJson",JSON.stringify(businessJson));
		window.location.href="../reserve/business.do?bsnum="+item.ID;
	};
	function searchItemSort(sortcode,areaid){
		$http.get("../sort/getSortlistBySortcode.do?timeStamp="+new Date().getTime()+"&sortcode="+sortcode+"&areaid="+areaid)
		.success(function(response) {
			$scope.sortList = response.ReturnValue;
			if($scope.sortList != null){
				$scope.getItemsBySortcode($scope.sortList[0]);
			}
			setTimeout(function(){
				var myScroll;
				function loaded () {
					myScroll = new IScroll('#wrapper', { mouseWheel: true,click: true  });
					myScroll = new IScroll('.wrapper1', { mouseWheel: true,click: true  });
					myScroll = new IScroll('.wrapper2', { mouseWheel: true,click: true  });
				}
				document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
				loaded ();
				},500);
			$(".com-load").fadeOut();
		});
	}
	function searchAllItemSort(sortcode,areaid){
		$http.get("../sort/getSortlistBySortcode.do?timeStamp="+new Date().getTime()+"&sortcode="+sortcode+"&areaid="+areaid)
		.success(function(response) {
			$scope.allSortList = response.ReturnValue;
			if($scope.allSortList != null){
				$scope.getAllItemsBySortcode($scope.allSortList[0]);
			}
		});
	}
});


双子叶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs 实例_AngularJS服务示例教程
从零开始的教程世界
07-11 239
angularjs 实例Today we will look at one of the important angular concepts called AngularJS Services. In the previous tutorial, we looked atAngularJS routing feature with a simple example. 今天，我们将介绍一个名为A...
angularjs小案例
QQ849410011的博客
04-29 897
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .a1{ width: 700px; } tr:nth-child(odd){ background-color:
angularjs 开发实例
05-30
angularjs的开发实例，解压，将文件夹方法tomcat中，即可运行。 访问/app/index.html
angularJs 简单实例
蚂蚁先锋队的博客
01-22 651
入口 agtest.html Insert title here  A  B   testApp.js /**获得全局app对象*/ var testApp = angular.module('testApp', [ 'ngRoute']); /**配置路由器*/ testApp.conf
angularjs 实例_AngularJS包含示例教程
从零开始的教程世界
07-10 379
angularjs 实例Earlier we looked at custom directives and in this tutorial, we will discuss about the transclusion in directives. 前面我们讨论了自定义指令，在本教程中，我们将讨论指令中的包含 。 Transclusion means the inclusion of the...
AngularJS开发实战（1）
热门推荐
陈峰的专栏
03-02 1万+
从接触angularjs到现在已经有1年多的时间期间已经用这个框架开发了大大小小的好几个项目，参考了其他一些项目的结构模版和自己摸索尝试，从一开始项目结构错乱复杂到现在我自认为是比较良好的结构划分，现在整理成一个系列留作团队培训内容和分享，如果有更好的方案欢迎一起研究讨论。 我们以一个简单的新闻管理系统作为引子从无到有的创建一个基于angularjs框架的系统，第一篇我们先从创建一个angular
AngularJS 实例
01-21
AngularJS 实例 实例 您可以在线编辑实例，然后点击按钮查看结果。 AngularJS 实例 名字 : Hello {{name}} AngularJS 基础 AngularJS – 从数据库中读取数据 AngularJS 应用
AngularJS ng-value 指令____AngularJS 实例.zip
03-09
在描述中提到的`AngularJS ng-value 指令____AngularJS 实例.zip`文件，可能包含了多个示例，如`AngularJS ng-value 指令____AngularJS 实例.pdf`，该文档很可能详细解释了`ng-value`的用法，并提供了代码实例。...
AngularJS ng-value 指令-AngularJS 实例.zip
02-08
在这个实例中，我们将深入探讨AngularJS的ng-value指令，以及如何在实际应用中使用它。 ng-value指令主要用于绑定输入元素的值，它可以将模型（model）的值直接赋给HTML元素的value属性。这在处理表单数据时特别...
AngularJS实例入门
08-08
**AngularJS实例入门** AngularJS，作为Google维护的一个前端JavaScript框架，是开发单页应用程序（SPA）的强大工具。本文将深入探讨AngularJS的基础知识、核心概念以及如何通过实例来掌握这个框架。 ### 1. ...
Angularjs 开发实例
10-27
angularjs 开发实例 angularjs 开发实例angularjs 开发实例angularjs 开发实例
AngularJs入门实例
theScoreONE的博客
05-30 2223
《一》、四大核心思想  1、依赖注入   2、模块化   3、双向绑定   4、语义化标签《二》、使用ng指令  1、ng-app 指令定义了AngularJs应用程序   2、ng-controller 定义了控制器， 用于控制 AngularJS 应用   3、ng-init 指令为 AngularJS 应用程序定义了 初始值。   4、ng-model 指令把元素值(比如输入域的
基于angularjs的单页面实例_AngularJS的最简单案例 -解道Jdon
weixin_39785970的博客
12-20 204
Angular.js的最简单案例在这个简单的单页应用(SAP)案例中展示AngularJS开发最基本的技巧，AngularJS是一个Model模型 -View 视图 - Controller控制器架构(MVC)，其中模型提供数据，控制器从模型获取需要的数据提供给视图，能查看视图显示的数据。由于我们要显示一些数据，我们需要所有三个组件。我们的案例是联系人地址簿，需要一个控制器，将提供联系人的列表数据...
AngularJS入门案例
TyCoding的博客
07-05 811
**AngularJS入门**​    AngularJS核心的特性就是：MVC模式、模块化、双向绑定、依赖注入等特性。利用AngularJS，我们能很方便的实现HTML页面和后端的数据交互，让我们逐步脱离JSP页面；HTML+Javascript+AJAX技术让我们能够做出来更轻的Web应用。&lt;!--more--&gt;# AngularJS四大特征## MVC模式**Model：**数据...
angularjs学习+实例
南北极之间
05-10 749
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angul...
简单说说angularJS和一个经典例子
u013273344的博客
09-15 1822
angularJS通过新的属性和表达式扩展了HTML。 注意这里是扩展了，让原来的HTML更加丰富的意思。 其次，angularJS是一个JS，有着JS的功能。 所有的语言其中一个特点，它的定位的问题，angularJS属于前端应用的范畴， 由于扩展了html和JS，所以这方面比jQuery更加好点。 angularJS是2009年开始开发的。 其中一个
AngularJS 官方案例:angular-phonecat
YingSide的专栏
09-29 3283
angualrJS的官方案例放在github上，并且通过bower做了包管理，如果之前没有接触过的同学完全不知道如何打开学习，这篇博文教大家angular-phonecat正确的打开方式
angularJS实战之小案例--notebook笔记本
sinat_21274091的博客
10-05 5862
来自《ionic实战》一书中的小案例，修改了一下，并写了详细注释。后台数据处理用的是node，为了展示效果数据存在json文件中，可暂时不看这部分。这个小案例虽然简单，但算是一个完整的案例了，前后端的数据都走通了，很适合新手学习。 效果图 编辑/新建 页 查看页  项目结构 重点源码 html
AngularJS实现订单案例
qixiang_chen的博客
01-19 805
Angular页面 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt; &lt;
AngularJS实例
最新发布
06-06
以下是一个简单的AngularJS实例，它定义了一个控制器和一个视图，实现了一个简单的计数器功能。 HTML代码： ``` <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="CounterCtrl"> <h1>{{title}}</h1> <p>当前计数器值为: {{count}}</p> <button ng-click="increment()">增加</button> <button ng-click="decrement()">减少</button> </div> </body> </html> ``` JavaScript代码（保存为app.js文件）： ``` var app = angular.module("myApp", []); app.controller("CounterCtrl", function($scope) { $scope.title = "计数器示例"; $scope.count = 0; $scope.increment = function() { $scope.count++; }; $scope.decrement = function() { $scope.count--; }; }); ``` 在这个示例中，我们定义了一个名为"myApp"的AngularJS应用程序，然后在HTML页面中使用ng-controller指令来指定控制器为"CounterCtrl"。控制器中定义了一个计数器变量"count"和两个方法"increment"和"decrement"，分别用于增加和减少计数器的值。在HTML视图中使用双括号语法"{{ }}"来显示计数器的值和标题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值