Introduction
$anchorScroll is the one of the service among the 30 AngularJS built-in services.This blog demonstrates how to use $anchorScroll in AngularJS.
Getting Started
$achonScroll service is used to scroll HTML elements in AngularJS, the scrolling depends on the hash value or $location.hash(). $achonScroll follows rules of HTML specification. This service depends three AngularJS built in services that is $window,$location,$rootScope for scrolling an html element.
This service basically uses in Single Page Application(SPA). Because in Single Page Application(SPA) all the child UI, or sub pages are displaying in one page and whenever any menu clicks, it scrolls respective child view.
Example:-
This following example demonstrates how to use achonScroll service in AngularJS. It displays list of students in a table in the Student List section and in bottom(Student details section) of page it displays details of a student, when double clicking in the a row of table. In the details section there is a link 'Go To List', when it is clicked AngularJS application scrolls page to Student list section.For this, this example uses $achonScroll with $location service. The hash function of $location helps to focus the location and $achonScroll scrolls the page to the location, you can use other two services as well. Fore more details please go through this example.
<html ng-app = "myapp">
<title> AngularJS Learning(anchoScroll)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope,$anchorScroll, $location){
$scope.student={ID:0,Name:'',Gender:"Male",Class:"1Std",Section:"A"};
$scope.gotdetails=function(student){
$scope.student=student;
if ($location.hash() !== 'stdetails') {
$location.hash('stdetails');
$anchorScroll();
}
}
$scope.gotolist=function(){
if ($location.hash() !== 'stList') {
$location.hash('stList');
$anchorScroll();
}
}
$scope.students=[
{Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"},
{Name:"Test Student1",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student2",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student3",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student4",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student5",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student6",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student7",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student8",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student9",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student10",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student11",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student12",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student13",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student14",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student15",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student16",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student17",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student18",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student19",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student20",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student21",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student22",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student23",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student24",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student25",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student26",Gender:"Male",Class:"2nd",Section:"B"}];
});
</script>
<body ng-controller="myappcont">
<div id="stList" style="height: 630px;">
<h2>Student List</h2>
<hr/>
<table border="1" style="width:500px">
<thead style="display: block;">
<tr>
<th width="150px">Name</th>
<th width="100px">Gender</th>
<th width="100px">Class</th>
<th width="100px">Section</th>
</tr>
</thead>
<tbody style="height: 480px; display: block; overflow-y: scroll;">
<tr ng-repeat="student in students" ng-dblclick="gotdetails(student)">
<td width="150px">{{student.Name}}</td>
<td width="100px">{{student.Gender}}</td>
<td width="100px">{{student.Class}}</td>
<td width="100px">{{student.Section}}</td>
</tr>
</tbody>
</table>
</div>
<div id="stdetails" style="height: 650px;">
<hr/>
<h2>Student Details</h2>
<a href="" ng-click="gotolist()" >Go To List</a>
<hr/>
<table>
<thead>
<tr>
<th>Property Name</th>
<th>Property Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td width="150px">{{student.Name}}</td>
</tr>
<tr>
<td>Gender</td>
<td width="100px">{{student.Gender}}</td>
</tr>
<tr>
<td>Class</td>
<td width="100px">{{student.Class}}</td>
</tr>
<tr>
<td>Section</td>
<td width="100px">{{student.Section}}</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>
Summary
Hope this article may helpful to you, happy coding enjo.....y.
Thanks
Kailash Chandra Behera
No comments:
Post a Comment