I am currently facing an issue with updating my table view when changing a variable that filters an array. The filter is applied in the controller based on the values of a specific variable called columnFilter. However, the filter does not reapply to update the table view once the variable changes.
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $filter) {
$scope.name = 'Superhero';
$scope.col={name:""};
$scope.TableData = [{
name: "2017/03/01-14",
specification: "1wk",
},
{
name: "2017/03/01-17",
specification: "Set-04",
},
{
name: "2017/03/04-11",
specification: "1wk",
},
{
name: "2017/04/01-14",
specification: "1wk",
},
{
name: "2017/03/10-10",
specification: "Set-04",
},
{
name: "2017/03/10-10",
specification: "Set-04",
}
$scope.TableDataFiltered = $filter('filter')($scope.TableData, $scope.col);
}HTML
<div ng-controller="MyCtrl">
<input type="text" ng-model="col.name">
<table>
<thead>
<tr>
<th>name</th>
<th>spec</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in TableDataFiltered">
<td>{{item.name}}</td>
<td>{{item.specification}}</td>
</tr>
</tbody>
</table>
</div>For those suggesting the use of | filter: expression, I am aware of that option. However, the app has additional filters that require filtering in the controller itself. In this example, I provided a minimal demonstration which may not clearly convey that point.