Angular实现下载安装包的功能代码分享
程序员文章站
2022-07-06 20:39:35
废话不多说了，直接给大家贴代码了，具体代码如下所示：
&l...
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html>
<html ng-app="mypro">
<head>
<meta charset="utf-8">
<title>angular-实现下载安装包的功能</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：下面在给大家分享一段代码关于angularjs实现锚点跳转实例
<!doctype html>
<html ng-app = "mypro">
<head>
<meta charset="utf-8">
<title>angularjs_实现锚点跳转实例</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>
总结
以上所述是小编给大家介绍的angular实现下载安装包的功能代码分享，希望对大家有所帮助