I am currently working on a table application that retrieves JSON data from a database. The data is passed to my app controller as a parameter and then filtered accordingly. Everything seems to be working well, except for the fact that I have a large amount of data (hundreds of thousands of objects). I have implemented search boxes to filter the data, but I am facing an issue where the $watch function does not get called when someone types into the search box. Am I overlooking something?
js:
var app = angular.module('SortingTables', ['ui.bootstrap']);
//Dependencies must map to string types which are then passed into the instance function
app.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
};
});
app.controller('Ctrl', function ($scope, filterFilter, dataTable) {
$scope.currentPage = 1;
$scope.itemsPerPage = 25;
$scope.totalItems = 0;
$scope.predicate = '';
$scope.searchBuffer = {
$: ''
};
$scope.filtered;
$scope.$watch('searchBuffer', function (term) {
console.log('The watch on searchBuffer was called');
$scope.filtered = filterFilter(dataTable, term);
$scope.totalItems = $scope.filtered.length;
});
$scope.pageChanged = function () {
$scope.currentRow = $scope.currentPage * $scope.itemsPerPage - $scope.itemsPerPage;
};
});
html
<div ng-app="Components" ng-controller="Ctrl">
<hr/>
<table class="table table-striped">
<tr>
<th><a href="" ng-click="predicate = '\'Technical Owner\''; reverse=!reverse">Technical Owner</a>
<br />
<input type="search" ng-model="searchBuffer['Technical Owner']">
</a>
</th>
<th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Branch</a>
<br />
<input type="search" style="width: 40px" ng-model="searchBuffer.Branch">
</a>
</th>
<th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Sub Pillar</a>
<br />
<input type="search" ng-model="searchBuffer['Sub Pillar']">
</a>
</th>
<th><a href="" ng-click="predicate = 'Path'; reverse=false">Path</a>
<br />
<input type="search" ng-model="searchBuffer.Path">
</a>
</th>
<th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Name</a>
<br />
<input type="search" ng-model="searchBuffer.Name">
</a>
</th>
<th><a href="" ng-click="predicate = 'Description'; reverse=!reverse">Description</a>
<br />
<input type="search" ng-model="searchBuffer.Description">
</a>
</th>
</tr>
<tr ng-repeat="ComponetOwner in filtered | startFrom:currentPage | orderBy:predicate:reverse | limitTo:itemsPerPage">
<td>{{ComponetOwner["Technical Owner"]}}</td>
<td>{{ComponetOwner.Branch}}</td>
<td>{{ComponetOwner["Sub Pillar"]}}</td>
<td>{{ComponetOwner.Path}}</td>
<td>{{ComponetOwner.Name}}</td>
<td>{{ComponetOwner.Description}}</td>
</tr>
</table>
<pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>
The $watch function is not being triggered when text is entered into the search box. Any insights on why this might be happening?