无法从模态内的过滤列表中获取过滤项目 [英] Can't get the filtered items from my filtered list inside a modal

问题描述

我有一个页面，可以在其中选择某些指令"时打开模式窗口.
加载该模式窗口后，我在其中有一个用于搜索的文本输入，一个列出所有指令"(我选择的指令除外)的有序列表，一个下拉列表以选择我要查看的指令数量每页，下一页和上一页有2个按钮，以及显示当前页面和当前页面数的文字.

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)

到目前为止，我得到的所有指令都正确，我的过滤器工作，每页结果有效，下一个和上一个按钮更改了页面……但看来我的numberOfPages函数无法正常工作.

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.

这是模式HTML页面:

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());
    });
}

这是我的模态控制器

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');
    };
};

调试之后，无论我试图将numberOfPages函数放在代码中的什么位置，numberOfPages函数中的filteredItems始终是未定义的.

After debugging, my filteredItems in the numberOfPages function was always undefined no matter where I tried to place the numberOfPages function in my code.

为什么我的ng-repeat中的filterItems总是未定义?我在非模式页面中也遇到了同样的问题，并且运行得很好.

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.

推荐答案

要回复评论，请尝试创建一个对象来保存filteredItems属性.这将继承并在父对象上创建属性:

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屋！