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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
详解参数传递四种形式
Jul 21 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
浅谈Express异步进化史
Sep 09 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
Destoon模板制作简明教程
2014/06/20 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
教师节宣传方案
2014/05/23 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
护理见习报告范文
2014/11/03 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python