整理项目中用到的angularjs及其他js代码
列表页数据展示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 查询结果 --> <ul id="ulView"> <li class="bgfff mt-15 ptb15 shopItem" ng-repeat="views in DataListView"> <input type="text" hidden value="{{ views.ShopCartID }}" class="ShopCartID" /> <input type="text" hidden value="{{ views.ProductID }}" class="ProductID" /> <input class="w-90 text-center fl mt-28 isCheck" type="checkbox"/> <a class="dis_b fl w-78" href="#"><img class="w100" src="../FileUpLaod/SmallPicture/{{ views.pic }}" /></a> <span class="dis_b fl ProView"> <input type="text" class="ProductAttributes" value="{{ views.ProductAttributes }}" hidden /> <em>货号:{{ views.product }}</em> <em>颜色:{{ views.ProductAttributes.split(";")[0] }}</em> <em>尺码:{{ views.ProductAttributes.split(";")[1] }}</em> <!--<i></i>--> </span> <span class="dis_b fl w-120 text-center colore63737">{{ views.price | currency:"" }}</span> <!--修改数量--> <ul class="edit_num fl w-120"> <li> <a href="javascript:void(0);" class="editnum" ng-click="subtractNum('ShopCartCount',false)">-</a> <a class="num" ng-model="count">{{ views.count }}</a> <a href="javascript:void(0);" class="editnum" ng-click="addNum('ShopCartCount',true)">+</a> </li> </ul> <span class="dis_b fl w-120 text-center colore63737 amount">{{ views.price*views.count | currency:"" }}</span> <div class="fl w-130 pl8"> <a href="javascript:void(0);" onclick="editData('ImportCollection', 'ProductID', this)" class="dis_b">移入收藏夹</a> <a href="javascript:void(0);" onclick="editData('DeleteCart', 'ShopCartID', this, 'dele')" class="dis_b">删除</a> </div> <div class="clearfix"></div> </li> </ul> <!--分页--> <div class="page"> <div class="page-one"> <a href="javascript:void(0);" class="page-two" ng-class="{true:'hover'}[x.IsDefault]" ng-repeat="x in pages" ng-click="goPages('MyOrderList',5,x.Index)"> <font class="page-two-2">{{ x.Index }}</font> </a> <a href="javascript:void(0);" class="page-three page-two-1" ng-click="goPages('MyOrderList',5,'prevPage')"> <font class="page-three-0">上一页</font> </a> <a href="javascript:void(0);" class="page-three page-two-1" ng-click="goPages('MyOrderList',5,'nextPage')"> <font class="page-three-0">下一页</font> </a> <font class="page-three-1">到第</font> <input id="goPageIndex" type="text" class="page-four"> <font class="page-three-1">页</font> <input type="button" value="GO" class="page-six" ng-click="goPages('MyOrderList',5,'goPageIndex')"> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var app = angular.module('MyDataList', []); app.controller('MyDatalistView', function ($scope, $http) { $scope.load = function (action, pageSize, pageIndex,vName) { $http.post(action, { pageSize: pageSize, pageIndex: pageIndex }).success(function (data) { if (vName != undefined) { var myName = "PageDataList" + vName; } //下订单页地址数据 $scope[myName] = data.ReResult; //带有分页的数据 $scope.DataListView = data.ReResult.list; //console.log(data); //拼分页数据 if ($(".page").length > 0) { var pages = []; for (var i = 1; i <= data.ReResult.TotalPageCount; i++) { var page = {}; page.Index = i; if(i == pageIndex){ page.IsDefault = true; } else { page.IsDefault = false; } pages.push(page); } $scope.pages = pages; } }); }; $scope.goPages = function (action, pageSize, pageIndex) {//数据分页 if (pageIndex == 'prevPage') { if ($(".page a.hover").find("font").text() == 1) { alert("已是第一页"); return false; } else { pageIndex = parseInt($(".page a.hover").find("font").text()) - 1; } //console.log(pageIndex); } else if (pageIndex == 'nextPage') { if ($(".page a.hover").find("font").text() == $(".page a.page-two").length) { alert("已是最后一页"); return false; } else { pageIndex = parseInt($(".page a.hover").find("font").text()) + 1; } } else if (pageIndex == 'goPageIndex') { pageIndex = $("#goPageIndex").val(); if (!(1 <= pageIndex && pageIndex <= $(".page a.page-two").length)) { alert("没有相关页的数据"); return false; } } $http.post(action, { pageSize: pageSize, pageIndex: pageIndex }).success(function (data) { for (var i = 0; i < $scope.pages.length; i++) { if (i == (pageIndex - 1)) { $scope.pages[i].IsDefault = true; } else { $scope.pages[i].IsDefault = false; } } $scope.DataListView = data.ReResult.list; }); }; //购物车加商品数量 $scope.addNum = function (action,changeType) { this.views.count++; $http.post(action, { Change: changeType, ShopCartID: this.views.ShopCartID }).success(function (data) { // console.log(data); }) changeProNum(this.views.ShopCartID, this.views.price, true); }; //购物车减商品数量 $scope.subtractNum = function (action, changeType) { if (this.views.count != 0) { this.views.count--; $http.post(action, { Change: changeType, ShopCartID: this.views.ShopCartID }).success(function (data) { //console.log(data); }) changeProNum(this.views.ShopCartID, this.views.price, false); } } });
当前页为选中状态
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="dizhi-left" id="menu"> <ul class="jiaoyi"> <li class="jiaoyibei"> <p>交易中心</p> </li> <li class="xiangxi2"> <a href="/UserCenter/MyOrder"><font>订单中心</font></a> </li> <li class="xiangxi2"> <a href="/UserCenter/ShoppingCart"><font>购物车</font></a> </li> </ul> <ul class="qianbao"> <li class="gerenqianbao"> <p>个人钱包</p> </li> <li class="xiangxi2"> <a href="/UserCenter/UserDetail"><font>消费明细</font></a> </li> </ul> <ul class="shezhi"> <li class="gerenshezhi"> <p>个人设置</p> </li> <li class="xiangxi2"> <a href="/UserCenter/UpdateUserMessage"><font>基本资料</font></a> </li> <li class="xiangxi2"> <a href="/UserCenter/UpdatePassWord"><font>密码修改</font></a> </li> <li class="xiangxi2"> <a href="/UserCenter/MyCollection"><font>收藏信息</font></a> </li> <li class="xiangxi2"> <a href="/UserCenter/UserAdress"><font>我的地址簿</font></a> </li> </ul> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var urlstr = location.href; //alert((urlstr + '/').indexOf($(this).find("a").attr('href'))); $("#menu .xiangxi2").each(function () { if ((urlstr + '/').indexOf($(this).find("a").attr('href')) > -1 && $(this).find("a").attr('href') != '') { $(this).find("font").addClass('colore50000'); } else { $(this).find("font").removeClass('colore50000'); } });
设置input file样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="left">
<a href="javascript:;" class="a-upload">
<input type="file">上传图片
</a>
<input class="showFileName left lineheight34" id="TransferPic" readonly name="TransferPic" />
<div class="clearfix"></div>
</div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*点击获取图片路径*/ if ($(".a-upload").length > 0) { $(".a-upload").on("change", "input[type='file']", function () { var filePath = $(this).val(); if(filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) { $(".fileerrorTip").html("").hide(); var arr = filePath.split('\\'); var fileName = arr[arr.length -1]; $(".showFileName").val(fileName); } else { $(".showFileName").val(""); $(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show(); return false } }) }
选择图片显示本地预览图,点击上传按钮异步上传图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="toufu">
<div class="tou">
<img id="ImgSrc" src="../FileUpLaod/@Model.UserIcon"><br>
<input type="text" id="UserIcon" name="UserIcon" hidden value="20160616184219972.jpg">
</div>
<a href="javascript:;" class="file">
选择头像
<input type="file" name="file" id="file1" onchange="PreviewImage(this,'ImgSrc')" >
</a>
<a onclick="uploadfile('#file1', 'file1', '#UserIcon', '#ImgSrc')">更改头像</a>
<div class="clearfix"></div>
</div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//上传图片 /* * 上传图片事件,该事件在insert或update页中(点上传按钮触发该事件) * inputid:点击选取图片后显示图片地址的input的id(#input) * fileId:点击选取图片后显示图片地址的input的id(input) * showpath:点击上传按钮后获取后台图片路径的input的id * imgdiv:放置已上传的图片的div的id * ismore:是否可以上传多张图片,0为否,1为是 * * */ function PreviewImage(fileObj, imgPreviewId, divPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等 if (window.FileReader) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); } reader.readAsDataURL(fileObj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("不支持Safari6.0以下浏览器的图片预览!"); } } else if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } else {//ie[7-9] fileObj.select(); if (browserVersion.indexOf("MSIE 9") > -1) fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问 var newPreview = document.getElementById(divPreviewId + "New"); if (newPreview == null) { newPreview = document.createElement("div"); newPreview.setAttribute("id", divPreviewId + "New"); newPreview.style.width = document.getElementById(imgPreviewId).width + "px"; newPreview.style.height = document.getElementById(imgPreviewId).height + "px"; newPreview.style.border = "solid 1px #d2e2e2"; } newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; var tempDivPreview = document.getElementById(divPreviewId); tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview); tempDivPreview.style.display = "none"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {//firefox7以下版本 document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL()); } else {//firefox7.0+ document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0])); } } else { document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } } else { alert("仅支持" + allowExtention + "为后缀名的文件!"); fileObj.value = "";//清空选中文件 if (browserVersion.indexOf("MSIE") > -1) { fileObj.select(); document.selection.clear(); } fileObj.outerHTML = fileObj.outerHTML; } } function uploadfile(inputid, fileId, showpath, imgdiv) { if ($(inputid).val().length > 0) { $.ajaxFileUpload({ url: 'UpLodPic', type: 'post', secureuri: false, fileElementId: fileId, dataType: 'text', success: function (data) { console.log(data); var imgurl = data.ReResult; if (imgdiv != "undefined") { $(imgdiv).attr('src', ("../FileUpLaod/" + imgurl.trim())); } $(showpath).val(imgurl); }, error: function (data, status, e) { console.log(e); } }) return false; } else { alert("请选择图片"); } }
<!--html页引入上传图片文件-->
<script src="~/JavaScript/ajaxfileupload.js"></script>
全选按钮
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//收藏页全选按钮事件 function checkAll(self) { var CheckBox = document.getElementsByTagName('input'); var ischeckall = $(self).is(":checked"); if (ischeckall) { for (i = 0; i < CheckBox.length; i++) { CheckBox[i].checked = true; }; } else { for (i = 0; i < CheckBox.length; i++) { CheckBox[i].checked = false; }; } }
发送验证码倒计时
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input class="huoquyan" type="button" id="btn" value="获取邮箱验证码" ng-disabled="myForm.UserEmail.$invalid" onclick="time(this, 'SendMailMessage')" /> /* *@description 发送验证码 *@param <Object> o 按钮本身 *@param <String> faction 请求后台的路径 */ var wait = 60; function time(o, faction) { $.get(faction, { UserEmail: $("#UserEmail").val() }, function (result) { alert(result.ReMessage); if (result.ReState == true) { CountDown(o); } }); } function CountDown(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value = "免费获取验证码"; wait = 60; clearTimeout(); } else { o.setAttribute("disabled", true); o.value = "重新发送(" + wait + ")"; wait--; setTimeout(function () { CountDown(o); }, 1000); } }