AngularJS模塊學(xué)習(xí)之Anchor Scroll
俗話說的好:好記性不如一個爛筆頭,本文對angularjs模塊學(xué)習(xí)筆記,首先我們從anchor scroll開始學(xué)習(xí),具體內(nèi)容請看下文:
•$anchorScroll()用于跳轉(zhuǎn)至定義ID;
•$location對象的hash()方法會替換當(dāng)前url作為hash鍵;
•$anchorScroll()讀取并跳轉(zhuǎn)至ID處。
下面簡單的例子,這里是輸出結(jié)果:
源碼 index.html--11行,標(biāo)示了的跳轉(zhuǎn)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 = { "自然數(shù)":["","","","","","","","","","","","","","","","","","","",""], "質(zhì)數(shù)":["","","","","","", "", "", "", ""] }; $scope.jumper = function(key){ $location.hash(key); $anchorScroll(); } });
以上所述是小編給大家整理的AngularJS模塊學(xué)習(xí)之Anchor Scroll 的相關(guān)內(nèi)容,希望大家喜歡。
相關(guān)文章
Angularjs 動態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12Angular2里獲取(input file)上傳文件的內(nèi)容的方法
這篇文章主要介紹了Angular2里獲?。╥nput file)上傳文件的內(nèi)容的方法,非常具有實用價值,需要的朋友可以參考下2017-09-09angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法
本篇文章主要介紹了angular動態(tài)刪除ng-repaeat添加的dom節(jié)點的方法,非常具有實用價值,需要的朋友可以參考下2017-07-07Angular5中調(diào)用第三方庫及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫及jQuery的添加的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06AngularJS中關(guān)于ng-class指令的幾種實現(xiàn)方式詳解
這篇文章給大家介紹了angularJS中ng-class指令的三種實現(xiàn)方式,其中包括通過數(shù)據(jù)的雙向綁定、通過對象數(shù)組和通過key/value這三種方式,有需要的朋友們可以參考學(xué)習(xí),下面來一起看看吧。2016-09-09ios設(shè)備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設(shè)備中angularjs無法改變頁面title的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular-UI Bootstrap組件實現(xiàn)警報功能
這篇文章主要介紹了Angular-UI Bootstrap組件實現(xiàn)警報功能,對Angular.js services的學(xué)習(xí)有所幫助,需要的朋友可以參考下2018-07-07AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信
這篇文章主要介紹了AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2016-09-09AngularJS+Bootstrap3多級導(dǎo)航菜單的實現(xiàn)代碼
將介紹如何用AngularJS構(gòu)建一個強(qiáng)大的web前端系統(tǒng)。文章介紹如何實現(xiàn)多限級導(dǎo)航菜單。本文圖文并茂給大家介紹的非常詳細(xì),感興趣的朋友參考下吧2017-08-08