Friday, 18 September 2020

AJS3

 

<html>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

</script>

<!-- ng-repeat- it used to repeat a set of html code for a number of times-->

 

<style>

          body {

                   margin: 2%;

                   font-size: 120%;

                   background-color:pink;

          }

         

          </style>

 

<body ng-app="myApp" ng-controller="ListController">

 

          <h1 align='center'>Student Details</h1>

         

          <table border=1 align='center'>

                   <thead>

                             <tr>

                                      <th>S.No</th>

                                      <th>Name</th>

                                      <th>City</th>

                                      <th>Mobile No.</th>

                                     

                             </tr>

                   </thead>

                   <tr ng-repeat="item in itemsDetails">

                             <td> {{item.sno}} </td>

                             <td> {{item.name}} </td>

                             <td> {{item.city}} </td>

                             <td> {{item.mobileno}} </td>

                            

                   </tr>

          </table>

 

</body>

<script>

          var app = angular.module('myApp', []);

          app.controller(

          'ListController', function($scope) {

 

                   $scope.itemsDetails = [

                   {

                                      sno: 1,

                                      name: 'Adhira',

                                      city: 'Pune',

                                      mobileno: 9978657865,

                                       

                   },

                             {

                                      sno: 2,

                                      name: 'Abira',

                                      city: 'Mumbai',

                                      mobileno: 7678908765,

                                     

                             },

 

                             {

                                      sno: 3,

                                      name: 'Akira',

                                      city: 'Satara',

                                      mobileno: 8976567897,

                                     

                             },

 

                             {

                                      sno: 4,

                                      name: 'Amira',

                                      city: 'Pune',

                                      mobileno: 7678976545,

                                     

                             }

 

                   ];

 

          });

</script>

</HTML>