Question

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

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

到目前为止，我得到的所有说明都恰到好处，我的过滤器工作，每页的结果都有效，下一个和上一个按钮改变了页面......但似乎我的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函数中的filteredItems总是未定义的。

为什么我的ng-repeat中的filteredItems总是未定义？我在非模态页面中有相同的东西，它的工作非常好。

Answer 1

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

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

无法从模式中的过滤列表中获取过滤后的项目

1 个答案: