I have a page where I can open a modal window when selecting a certain "instruction"
When that modal window is loaded, I have inside of it a text input for searching, an ordered list to list all of the "instructions" (except the one I selected), a dropdown list to select the amount of instructions I want to see per page, 2 buttons for next and previous page as well as text showing the current page and how many page there is.
This is what it looks like (the Manual dropdown list does nothing for now)
So far, I get all my instructions just right, my filter work, the result per page works, the next and previous button change the page... but it seems like my numberOfPages function isn't working.
This is the modal HTML page:
<div>
Search: <input type="text" ng-model="search.Description"/> Manual:
<select ng-options="manual.Description for manual in manuals">
</select>
</div>
<br />
<div class="table clearfix" style="max-width: 800px; max-height: 300px; overflow: scroll;">
<ol class="table-body clearfix">
<li class="table-row clearfix" ng-repeat="item in ( filteredItems = ( instructions | filter:search:strict)) | startFrom:currentPage*showLimit | limitTo:showLimit" ng-include="'js/manuals/manuals-item-instruction-attachment-showInstruction.html'"></li>
</ol>
</div>
<div>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
Page: {{currentPage + 1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage + 1">Next</button>
Results per page:
<select ng-model="showLimit">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
This is the function where my modal is created and opened
openreference: function (item) {
var modalInstance = $modal.open({
templateUrl: 'js/manuals/manuals-item-instruction-attachment.html',
controller: ModalInstanceCtrl,
resolve: {
instruction: function () {
return item;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
},
function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
And this is my modal controller
var ModalInstanceCtrl = function ($scope, $modalInstance, instruction) {
$scope.showLimit = 10;
$scope.currentPage = 0;
$scope.numberOfPages = function () {
if ($scope.currentPage + 1 > Math.ceil($scope.filteredItems.length / $scope.showLimit)) {
$scope.currentPage = 0;
}
return Math.ceil($scope.filteredItems.length / $scope.showLimit);
}
$http({ method: 'GET', url: '../api/Instructions/GetAllOtherInstructions', params: { 'instructionId': instruction.Id} }).success(function (result) {
$scope.instructions = result;
});
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
After debugging, my filteredItems in the numberOfPages function was always undefined no matter where I tried to place the numberOfPages function in my code.
Why are my filteredItems from the ng-repeat always undefined? I have the same thing in a non-modal page and it's working perfectly fine.