AngularJS模块学习之Anchor Scroll


Posted in Javascript onJanuary 19, 2016

俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文:

•$anchorScroll()用于跳转至定义ID;
•$location对象的hash()方法会替换当前url作为hash键;
•$anchorScroll()读取并跳转至ID处。

下面简单的例子,这里是输出结果:

AngularJS模块学习之Anchor Scroll

源码 index.html--11行,标示了的跳转ID:

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-">
</head>
<body ng-controller="MockController">
<button ng-repeat="(key, value) in numbers" ng-click="jumper(key)"> {{key}} </button>
<div ng-repeat="(key, value) in numbers" id="{{key}}">
<h>{{key}}</h>
<ol>
<ul ng-repeat="item in value"> {{item}} </ul>
</ol>
</div>
</body>
</html>

app.js

var demoApp = angular.module("app",[])
.controller("MockController",
function ($scope, $location, $anchorScroll) {
$scope.numbers = {
"自然数":["","","","","","","","","","","","","","","","","","","",""],
"质数":["","","","","","", "", "", "", ""]
};
$scope.jumper = function(key){
$location.hash(key);
$anchorScroll();
}
});

以上所述是小编给大家整理的AngularJS模块学习之Anchor Scroll 的相关内容,希望大家喜欢。

Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
Jquery 基础学习笔记
May 29 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
jQuery unbind()方法实例详解
Jan 19 #Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 #Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 #Javascript
You might like
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python中的print()输出
2019/04/12 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
成考报名单位证明范本
2014/01/16 职场文书
办公室人员先进事迹
2014/01/27 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
婚纱店策划方案
2014/05/22 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
python基础之函数的定义和调用
2021/10/24 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle