angularJS 实例
微生青青
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]);
}
});
}
});
类似资料：