无法从模态框内的过滤列表中获取过滤后的项目答案

【问题标题】：Can't get the filtered items from my filtered list inside a modal无法从模态框内的过滤列表中获取过滤后的项目
【发布时间】：2014-02-23 09:50:35
【问题描述】：

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

这就是它的样子（手动下拉列表现在什么都不做）

到目前为止，我的所有指令都正确，我的过滤器工作，每页的结果工作，下一个和上一个按钮改变页面......但我的 numberOfPages 函数似乎不起作用。

这是模态 HTML 页面：

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

这是创建和打开我的模态的函数

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 函数中的过滤项始终未定义。

为什么我的 ng-repeat 中的过滤项目总是未定义？我在非模态页面中也有同样的东西，它工作得很好。

【问题讨论】：

应该设置filteredItems 的代码在哪里？在ng-repeat html 中？我不认为这是有效的。
有效，见here。我也在一个页面中列出了所有用户并用分页过滤它们。这和我在这里的完全一样，只是它不是模态的。我有一种感觉，我只是犯了一个愚蠢的错误，但我无法指出我做错了什么。
你能用batarang调试你的示波器吗？模态是否有其自己的范围，但过滤项目没有到达？
我不确定 Batarang 是如何工作的，我会继续阅读。乍一看，我可以看到在我拥有所有工作（currentPage、选定指令等）的范围内，并且在范围的下一个分支中，我已经过滤了包含所有过滤指令的过滤项
@Jason Goemaat 在我的 $scope 上设置监视后，我发现 filtersItems 作为子范围，就像在 Batarang 调试中一样。无论如何在它的父范围中有filteredItems，或者我应该更改我的numberOfPages 函数中的$scope.filteredItems 以在$scope 子filteredItems 上引用？

标签： angularjs filter pagination modal-dialog ng-repeat

【解决方案1】：

在回复评论时，尝试创建一个对象来保存 filtersItems 属性。这将继承并在父对象上创建属性：

$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>

【讨论】：