整理项目中用到的angularjs及其他js代码

Posted 2020-08-01 小时光

列表页数据展示

            <!-- 查询结果 -->
            <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>

html代码

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);
        }
    }
});

JS代码

 

当前页为选中状态

<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>

HTML代码

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\');
        }
    });

JS代码

 

设置input file样式

<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>

html代码

/*点击获取图片路径*/
    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
            }
        })
    }

JS代码

 

选择图片显示本地预览图，点击上传按钮异步上传图片

<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>

html代码

//上传图片
/*
 * 上传图片事件，该事件在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("请选择图片");
    }
}

JS代码

 <!--html页引入上传图片文件-->
<script src="~/JavaScript/ajaxfileupload.js"></script>

全选按钮

//收藏页全选按钮事件
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; };
    }

}

View Code

 

发送验证码倒计时

<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);
    }
}

View Code