Reading JSON string & displaying records
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>Angular Home