Angular實(shí)現(xiàn)下載安裝包的功能代碼分享
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angular-實(shí)現(xiàn)下載安裝包的功能</title> <script src="js/angular.min.js"></script> <script src="js/jquery-1.11.0.js"></script> <style> *{padding: 0;margin: 0;} ol,ul{list-style: none;} a{display:block;margin: 200px 0 0 500px;} </style> </head> <body ng-controller="myProController"> <a href="{{onLoadPcUrl}}" rel="external nofollow" >下載安裝包</a> </body> <script> var pro = angular.module("myPro",[]); pro.controller("myProController",["$scope","$rootScope","$location",function($scope,$rootScope,$location){ console.log($location.absUrl().split("angularJS")[0]); $scope.onLoadPcUrl = $location.absUrl().split("angularJS")[0]+'angularJS/test/test.zip'; }]); </script> </html>
PS:下面在給大家分享一段代碼關(guān)于angularJS實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)實(shí)例
<!DOCTYPE html> <html ng-app = "myPro"> <head> <meta charset="UTF-8"> <title>angularJS_實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)實(shí)例</title> <script src="js/angular.min.js"></script> <script src="js/jquery-1.11.0.js"></script> <style> *{padding: 0;margin: 0;} ul,ol{list-style: none;} body{background-color: #414246;} ::-webkit-scrollbar{width: 7px;height: 4px;} ::-webkit-scrollbar-track{border-radius:0 ;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.1);} ::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);} .box{width: 800px;height: 500px;border: 1px solid #000000;margin: 100px auto;background-color: #373a3f;color: #a1a6a7;font-size: 12px;} .box .box-header{width: 790px;height:40px;border: 1px solid #000000;padding: 10px 0 0 10px;font-size: 14px;} .box .box-header ul li{float: left;margin: 0 8px;line-height: 40px;font-size: 16px;cursor: pointer;} .box .box-header ul li.on{color: #0088cc;text-shadow: 0 0 6px #808080;cursor: pointer;} .box .box-main{width: 790px;height: 440px;padding: 10px 0 0 10px;overflow-y:auto;} .box .box-main ul .first_li{width:100%;height: 100px;} .box .box-main ul .first_li .initials{width:100%;height: 20px;line-height: 20px;background-color: #3f4045;} .box .box-main ul .first_li .position{width:100%;} .box .box-main ul .first_li .position ul li{width:50px;height: 20px;line-height: 20px; float: left;text-align: center;margin: 20px;} </style> </head> <body ng-controller = "myProController"> <div class="box"> <div class="box-header"> <ul choice-channel-jump> <li ng-class="{'on':charArray.other}">#</li> <li ng-class="{'on':charArray.A}">A</li> <li ng-class="{'on':charArray.B}">B</li> <li ng-class="{'on':charArray.C}">C</li> <li ng-class="{'on':charArray.D}">D</li> <li ng-class="{'on':charArray.E}">E</li> <li ng-class="{'on':charArray.F}">F</li> <li ng-class="{'on':charArray.G}">G</li> <li ng-class="{'on':charArray.H}">H</li> <li ng-class="{'on':charArray.I}">I</li> <li ng-class="{'on':charArray.J}">J</li> <li ng-class="{'on':charArray.K}">K</li> <li ng-class="{'on':charArray.L}">L</li> <li ng-class="{'on':charArray.M}">M</li> <li ng-class="{'on':charArray.N}">N</li> <li ng-class="{'on':charArray.O}">O</li> <li ng-class="{'on':charArray.P}">P</li> <li ng-class="{'on':charArray.Q}">Q</li> <li ng-class="{'on':charArray.R}">R</li> <li ng-class="{'on':charArray.S}">S</li> <li ng-class="{'on':charArray.T}">T</li> <li ng-class="{'on':charArray.U}">U</li> <li ng-class="{'on':charArray.V}">V</li> <li ng-class="{'on':charArray.W}">W</li> <li ng-class="{'on':charArray.X}">X</li> <li ng-class="{'on':charArray.Y}">Y</li> <li ng-class="{'on':charArray.Z}">Z</li> </ul> </div> <div class="box-main"> <ul> <li class="first_li" ng-repeat="data in positionDatas" id="{{data.letter=='#'?'other':data.letter}}"> <p class="initials">{{data.letter}}</p> <div class="position"> <ul> <li ng-repeat = "d in data.title track by $index"> <p>{{d.name}}</p> </li> </ul> </div> </li> </ul> </div> </div> </body> <script> var pro = angular.module("myPro",[]); pro.controller("myProController",["$scope",function($scope){ var data = [ {"letter":"#","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"A","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"B","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"C","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"D","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"E","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"F","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"G","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"H","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"I","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"J","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"K","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"L","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"M","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"N","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"O","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"P","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"Q","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"R","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"S","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"T","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"U","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"V","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"W","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"X","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"Y","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]}, {"letter":"Z","title":[{"name":"張三"},{"name":"李四"},{"name":"周吳"},{"name":"鄭王"}]} ]; $scope.positionDatas = data; $scope.charArray = { A:false, B:false, C:false, D:false, E:false, F:false, G:false, H:false, I:false, J:false, K:false, L:false, M:false, N:false, O:false, P:false, Q:false, R:false, S:false, T:false, U:false, V:false, W:false, X:false, Y:false, Z:false, other:false }; angular.forEach($scope.positionDatas,function(i){ if(i.letter=="#"){ $scope.charArray.other = true; }else{ $scope.charArray[i.letter] = true; }; }) }]); pro.directive("choiceChannelJump",[function(){ return{ restrict:"A", link:function(scope,element,attr){ var parent = $(".box-main"); var obj = $(element); obj.find("li").click(function(){ var _this = $(this); var text = _this.text(); console.log(text); if(text=="#"){ text = "other"; }; if(_this.hasClass('on')){ parent.animate({scrollTop:$('#'+text).offset().top-parent.offset().top+parent.scrollTop()+'px'}) } }); } } }]); </script> </html>
總結(jié)
以上所述是小編給大家介紹的Angular實(shí)現(xiàn)下載安裝包的功能代碼分享,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對話框
在完成一個(gè)后臺(tái)管理系統(tǒng)時(shí),需要用表格顯示注冊用戶的信息。但是用戶地址太長了,不好顯示。所以想做一個(gè)模式對話框,點(diǎn)擊詳細(xì)地址按鈕時(shí),彈出對話框,顯示地址。下面小編給大家分享下實(shí)現(xiàn)方法,一起看下吧2016-08-08AngularJS通過$location獲取及改變當(dāng)前頁面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細(xì),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-09-09AngularJS與BootStrap模仿百度分頁的示例代碼
分頁在很多時(shí)候都能用到,這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Angular4學(xué)習(xí)教程之DOM屬性綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之DOM屬性綁定的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01