AngularJS模块学习之Anchor Scroll
更新时间：2016年01月19日 14:20:42 作者：林松2012
这篇文章主要介绍了AngularJS模块学习之Anchor Scroll 的相关资料,需要的朋友可以参考下
俗话说的好：好记性不如一个烂笔头，本文对angularjs模块学习笔记，首先我们从anchor scroll开始学习，具体内容请看下文：
•$anchorScroll（）用于跳转至定义ID；
•$location对象的hash()方法会替换当前url作为hash键；
•$anchorScroll()读取并跳转至ID处。
下面简单的例子，这里是输出结果：
源码 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 的相关内容，希望大家喜欢。
相关文章
这篇文章主要介绍了angular *Ngif else用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
AngularJS实践之使用NgModelController进行数据绑定
大家都知道AngularJS中的指令是其尤为复杂的一个部分，但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中，利用ngModel的controller来做双向数据绑定，本文对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴。2016-10-10
这篇文章主要给大家介绍了关于protractor安装与基本使用的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了在 Angular中 使用 Lodash 的方法,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了深入理解AngularJs－scope的脏检查（一） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了AngularJS中下拉框的高级用法,结合实例形式分析了AngularJS下拉框的遍历、选择、绑定、显示等功能实现方法,需要的朋友可以参考下2017-10-10
angular-ngSanitize模块-$sanitize服务详解
本篇文章主要介绍了angular-ngSanitize模块-$sanitize服务详解 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了小谈angular ng deploy的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
这篇文章主要介绍了Angularjs中的验证input输入框只能输入数字和小数点的写法,需要的朋友可以参考下2017-08-08
AngularJS的ng Http Request与response格式转换方法
这篇文章主要介绍了AngularJS的ng Http Request与response格式转换方法,结合实例形式分析了AngularJS实现Request与response格式转换操作的相关设置与使用技巧,需要的朋友可以参考下2016-11-11
最新评论