My Approach: Implementing AngularJS Search Filter in Table Styling for table and table data elements: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; }
<body>
<div ng-app="myApp" ng-controller="namesCtrl"/>
<p>Filter Input:</p>
<p><input type="text" data-ng-model="search.City"></p>
<table>
<tr data-ng-repeat="x in names | filter: search: strict ">
<td> {{ x.Name }}</td>
<td>{{ x.City }} </td>
<td> {{ x.Country }}</td>
</tr>
</table>
<p>{{ City | lowercase }}</p>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.get("names.js")
.success(function (response) {$scope.names = response.records;});
});
</script>
</body>
</html>
The code above showcases how to present data from a table based on the user's filter input. In this scenario, if the user searches for "Sao", it should return rows containing "Sao" as the city name.