Reading JSON string & displaying records

Basics of Angular
Our sample student table database records are available here in JSON format. We will read the rows and display here.

{{ x.id }}{{ x.name }}{{ x.class }}{{ x.mark }}{{ x.gender }}
<div ng-app="my_app" ng-controller="studentCtrl">

<table>
  <tr ng-repeat="x in details">
    <td>{{ x.id }}</td><td>{{ x.name }}</td><td>{{ x.class }}</td><td>{{ x.mark }}</td>
	<td>{{ x.gender }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('my_app', []);
app.controller('studentCtrl', function($scope, $http) {
  $http.get("../php_tutorial/student.json")
  .then(function (response) {$scope.details = response.data;});
});
</script>

Limiting rows by adding filter

We can display students of any perticular class by adding filters to this. Here is the change in code.
DEMO: Filtering Options
<table>
   <tr ng-repeat="x in details | filter :{'class':'Four'}">
    <td>{{ x.id }}</td><td>{{ x.name }}</td><td>{{ x.class }}</td><td>{{ x.mark }}</td>
	<td>{{ x.gender }}</td>
  </tr>
</table>
Basics of Angular Basics of Angular
Angular Home

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer