Angular实现下载安装包的功能代码分享


Posted in Javascript onSeptember 05, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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实现下载安装包的功能代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
详解Vue router路由
Nov 20 Vue.js
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 #Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
对于Javascript 执行上下文的全面了解
Sep 05 #Javascript
You might like
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
php事件驱动化设计详解
2016/11/10 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python socket实现简单聊天室
2018/04/01 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python partial函数原理及用法解析
2019/12/11 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
如何理解Python中包的引入
2020/05/29 Python
python 批量将中文名转换为拼音
2021/02/07 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
国际会议邀请函范文
2014/01/16 职场文书
迎新晚会策划方案
2014/06/13 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014年纪检部工作总结
2014/11/12 职场文书