In order to populate the table based on the selected element you have to get the value using ng-model in the select element. And to make sure the ng-model variable gets it each time a selection is made you can use ng-options to populate all the options from your Statuses. Such as:
<select ng-change='loadStats()' ng-model='selectedStatus' ng-options='k as k for (k,v) in stats'>
</select>
The ng-change is what triggers the event when a selection is made it calls the function from your controller's $scope. The string 'k as k for (k,v) in stats' is simply for handling your statuses object and reading it as (Key, Value) pairs then printing the key as Label.
The definition of the controller holds the loadStats() and other initializations of $scope variables:
function Ctrl($scope, $http) {
$scope.stats = statuses;
$scope.table = tableData;
$scope.tableShow = $scope.table;
$scope.selectedStatus = 'Pending';
$scope.status = $scope.stats[$scope.selectedStatus];
$scope.loadStats = function() {
$scope.status = $scope.stats[$scope.selectedStatus];
};
}
After the selection is made, to populate the table you need the filter to be defined. The filter depends on the array of the selected status and all the rows. For populating the table you can use an array of objects. This array can help us filter too. Suppose the table's data is represented like:
var tableData = [
{status: 'Entered', value: '1'},
{status: 'Entered', value: '2'},
{status: 'Submitted', value: '3'},
{status: 'Approved', value: '4'},
{status: 'A', value: '1'},
{status: 'B', value: '2'},
{status: 'C', value: '1'},
]
Now to populate the table we use the filter defined like:
var app = angular.module('myApp', []);
app.filter('filterMyStats',function(){
return function (table, status) {
return table.filter(function(row){
if (status.indexOf(row.status) != -1) {
return true;
} else {
return false;
}
})
}
});
And we apply the filter using the ng-repeat:
<tr ng-repeat="tr in tableShow | filterMyStats:status">
<td>{{tr.status}}</td><td>{{tr.value}}</td>
</tr>
Here's a
fiddle
