
Our sample student table database records are available here in JSON format. We will ask user to enter any text and based on this input we will dynamically change the filter to return matching rows.
The filter is applied to name column only.
Basics of Angular: reading JSON →
<div ng-app="my_app" ng-controller="studentCtrl">
<p><input type="text" ng-model="s_name"></p>
<table>
<tr ng-repeat="x in details | filter :{'name':s_name}">
<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>
← Basics of Angular Basics of Angular →
←Angular Home