Slip 16 - D) Using AngularJS display the student details who are live in pune in Table format (using ng-repeat directive, use Array to store data, use filter )

Solution:

<html>

 <head>

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

    <script>
        var app = angular.module("myApp", []);
        app.controller('studCtrl', ['$scope', function ($scope)
        {
            $scope.showStudent = function () 
            {
                $scope.stud = [
                { name: 'Amit', city: 'pune' },
                { name: 'Sumit', city: 'pune' },
                { name: 'Rahul', city: 'mumbai' },
                { name: 'sachin', city: 'mumbai' }
                ];
            }
        }]);
    </script>
</head>

<body ng-app="myApp" ng-controller="studCtrl">
    <form>
    <div ng-controller="studCtrl">
    <h1>List of students living in pune</h1><br>
    <table border="2">
    <tr>
        <th>Name</th>
        <th>City</th>
    </tr>
    <tr ng-repeat="x in stud | filter:'pune'">
    <td>{{x.name}}</td>
    <td>{{x.city}}</td>

    </tr>

</table>
</div>
</div>

<br><input type="button" ng-click="showStudent()" value="Click Here"> 

</form>
</body>
</html>

Post a Comment

0 Comments