无法从模态内的过滤列表中获取过滤项目 [英] Can't get the filtered items from my filtered list inside a modal
问题描述
我有一个页面，可以在选择某个指令"时打开一个模态窗口
当该模态窗口加载时，我在其中有一个用于搜索的文本输入，一个列出所有指令"(除了我选择的指令)的有序列表，一个选择我想要查看的指令数量的下拉列表每页，下一页和上一页的 2 个按钮以及显示当前页面和页数的文本.
这就是它的样子(手动下拉列表现在什么都不做)
到目前为止，我的所有指令都恰到好处，我的过滤器工作，每页的结果工作，下一个和上一个按钮更改页面......但我的 numberOfPages 函数似乎不起作用.
这是模态 HTML 页面:
搜索:<input type="text" ng-model="search.Description"/>手动的:<select ng-options="manual.Description for manual in manuals"></选择><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><button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">上一个</button>页数:{{currentPage + 1}}/{{numberOfPages()}}<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage + 1">下一步</button>每页结果:<选择 ng-model="showLimit"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></选择>
这是我的模态创建和打开的函数
openreference: function (item) {var modalInstance = $modal.open({templateUrl: 'js/manuals/manuals-item-instruction-attachment.html',控制器:ModalInstanceCtrl，解决: {指令:函数(){归还物品;}}});modalInstance.result.then(function (selectedItem) {$scope.selected = selectedItem;},功能 () {$log.info('Modal 在以下时间被驳回:' + new Date());});}这是我的模态控制器
var ModalInstanceCtrl = function ($scope, $modalInstance, 指令) {$scope.showLimit = 10;$scope.currentPage = 0;$scope.numberOfPages = 函数 () {if ($scope.currentPage + 1 > Math.ceil($scope.filteredItems.length/$scope.showLimit)) {$scope.currentPage = 0;}返回 Math.ceil($scope.filteredItems.length/$scope.showLimit);}$http({ method: 'GET', url: '../api/Instructions/GetAllOtherInstructions', params: { 'instructionId': instructions.Id} }).success(function (result) {$scope.instructions = 结果；});$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};};调试后，无论我尝试将 numberOfPages 函数放在代码中的什么位置，我在 numberOfPages 函数中的过滤项始终未定义.
为什么我的 ng-repeat 中的filteredItems 总是未定义?我在非模态页面中也有同样的事情，而且工作得很好.
在回复评论时，尝试创建一个对象来保存filteredItems 属性.这将继承并在父对象上创建属性:
$scope.data = { };html:
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.
In reply to the comment, try creating an object to hold the filteredItems property. That will inherit and the property will be created on the parent object:
$scope.data = { };
html:
<li class="table-row clearfix"
ng-repeat="item in ( data.filteredItems = ( instructions | filter:search:strict)) | startFrom:currentPage*showLimit | limitTo:showLimit"
ng-include="'js/manuals/manuals-item-instruction-attachment-showInstruction.html'"></li>
这篇关于无法从模态内的过滤列表中获取过滤项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
