Is there a way to dynamically filter the content of a table based on the selected option?
I want the table to refresh every time I change the option in the select dropdown.
HTML
<select ng-model="selectedGrade" ng-options="grade.Id as grade.Title for grade in grades"></select>
<table>
<tr>
<th>ID</th>
<th>Description</th>
</tr>
<tr ng-repeat="attr in attributes|filter:{grade:selectedGrade.Title}">
<td>{{attr.id}}</td>
<td>{{attr.name}}</td>
</tr>
</table>
Module
angular.module('Employee',[])
.controller('EmployeeCtl',function($scope){
$scope.grades=[
{"id":1,"Title":"MTS"},
{"id":2,"Title":"SMTS"},
{"id":3,"Title":"PMTS"},
{"id":4,"Title":"CMTS"}
];
$scope.attributes=[
{"id":1,"name":"Greg","grade":"MTS"},
{"id":2,"name":"Marlon","grade":"SMTS"},
.........
];
});