Slip 13 - D) Using AngularJS create a SPA that accept the details of student and display mark sheet ( roll_ no, student_ name, class, sub1, sub2, sub3, total, percentage, grade)

Solution:

<html>

<head>

<meta charset="UTF-8">

<title>Students Marksheet Program</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>

</head>

<body ng-app="mainApp" ng-controller="studentController" >

<h2>Student Marksheet Program</h2>

<div>

<form name="form1">

<table border="1">

<tr>

<td>Enter roll number</td>

<td><input type="number" ng-model="rollno"></td>

</tr>

<tr>

<td>Enter student name: </td>

<td>

<input type="text" name="sname" ng-model="studName">

</td>

</tr>

<tr>

<td>Enter Class </td>

<td><input type="text" name="sclass" ng-model="class1"> </td>

</tr>

<tr>

<td>Enter Subject1 Marks</td>

<td> <input type="number" name="subject1" ng-model="sub1"></td>

</tr>

<tr>

<td>Enter Subject2 Marks</td>

<td> <input type="number" name="subject2" ng-model="sub2"></td>

</tr>

<tr>

<td>Enter Subject3 Marks</td>

<td> <input type="number" name="subject3" ng-model="sub3"></td>

</tr>

<tr>

<td> <input type="button" value="Display Result" ng-click="isShowHide('show')">

</td>

</tr>

</table>

</form>

</div>

<div ng-show="showval" >

<br><br>

Mark Sheet of Student<br><br>

<form name="form2" controller="studentController">

<table border="2">

<thead>

<td>rollno</td>

<td>name</td><td>class</td><td>subject1</td><td>subject2</td><td>subject3</td><td>Total</ td><td>percentage</td><td>grade</td>

</thead>

<tr>

<td>{{rollno}}</td>

<td>{{studName}}</td>

<td>{{class1}}</td>

<td>{{sub1}}</td>

<td>{{sub2}}</td>

<td>{{sub3}}</td>

<td>{{sub1 + sub2 + sub3}}</td>

<td>{{(( sub1+sub2+sub3)/300)*100;}}</td>

<td><input type="text" name="grade" ng-model="grade"></td>

</tr>

</table>

</form>

</div>

<script>

var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function ($scope) {

$scope.showval=false;

$scope.isShowHide = function (param) { if (param=="show") {

$scope.showval = true;

}

if($scope.per=74 && $scope.per<=100)

$scope.grade="A";

else if($scope.per=60 && $scope.per<74)

$scope.grade="First";

else if($scope.per>=45 && $scope.per<59)

$scope.grade="Second";

else if($scope.per>=35 && $scope.per<45)

$scope.grade="Pass"; else

$scope.grade="fail";

}

});

</script>

</body>

</html>

Post a Comment

0 Comments