Applying Filter using user input while displaying records
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.
| {{ x.id }} | {{ x.name }} | {{ x.class }} | {{ x.mark }} | {{ x.gender }} |
<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>Angular Home