Think we need to make an ajax call to server to get details of a set of student and display when a button clicked.
Here is the complete code for that scenario and I will explain later what happens there.
<!DOCTYPE html>
<html>
<head>
<title>Ajax With Angular</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
th{
background: lightgray;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<div ng-app = "" ng-controller = "studentController">
<div ng-show="visible">
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.Marks }}</td>
</tr>
</table>
</div>
<button ng-click="update()">Show Details</button>
</div>
<script>
function studentController($scope,$http) {
var url = "studentdata.txt";
$scope.visible = false;
$scope.update = function(){
$scope.visible=true;
$http.get(url).success( function(response) {
$scope.students = response;
});
}
}
</script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
studentdata.txt file
[
{
"Name" : "Mark",
"Marks" : 76
},
{
"Name" : "Robert",
"Marks" : 62
},
{
"Name" : "Jane",
"Marks" : 81
},
{
"Name" : "Ann",
"Marks" : 54
}
]
Lets see what really happens there
If you don't have a clear idea about please Directives, Controllers and Scope please refer previous posts about Controllers and Directives.
Here we have attached three things to the scope of "studentController" controller
- Variable "visible"
- Function "update"
- Array "students" (Attached after a success AJAX call)
Here is how the AJAX call is made to the studentdata,txt file in server and attach the result to the scope of controller.
$http.get(url).success( function(response) {
$scope.students = response;
});
Note: $http should be added as a dependency in our controllerHere is the complete code for the controller
function studentController($scope,$http) {
var url = "studentdata.txt";
$scope.visible = false;
$scope.update = function(){
$scope.visible=true;
$http.get(url).success( function(response) {
$scope.students = response;
});
}
}
First variable
visble is set to false because we want details to be displayed only after click the button (Displaying that div that contains the table is handled by ng-show directive)update that is attaches to the scope is executed when a button click occur using ng-click angular directive You can access a database if this AJAX call an be handled by nodejs or any other server side scripting language.
No comments:
Post a Comment