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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
js实现碰撞检测
Jan 29 Javascript
简单谈谈关于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
php 进度条实现代码
2009/03/10 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
小程序实现搜索框
2020/06/19 Javascript
Python3中关于cookie的创建与保存
2018/10/21 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python列表解析操作实例总结
2020/02/26 Python
Python 如何实现访问者模式
2020/07/28 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
TCP/IP的分层模型
2013/10/27 面试题
优秀中专生推荐信
2013/11/17 职场文书
校长就职演讲稿
2014/01/06 职场文书
自我鉴定书面格式
2014/01/13 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
初一学生期末评语
2014/04/24 职场文书
法律专业求职信
2014/05/24 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
房产证明范本
2015/06/19 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Mysql Show Profile
2021/04/05 MySQL