angularJs inifinite-scroll指令-仅显示前20行

时间:2019-03-19 11:57:57

标签: javascript jquery html angularjs infinite-scroll

我正在尝试对angularJS使用无限滚动指令。这些示例显示了div内div的用法,但就我而言,我试图在表中使用它。这是我的html:

<div class="scrolling-table-body">
                    <table class="table table-bordered table-hover table-list">
                        <thead search-table-header data-table="duplicatesTable"
                               data-search="sort(column)"
                               data-show-row-selector="true"
                               data-hide-sorting-indicator="true"
                               data-row-selector-click="selectAllRows(allSelected)"
                               data-column="column">
                        </thead>
                        <tbody infinite-scroll="loadMore()">                            
                            <tr ng-repeat="row in duplicatesArray"
                                
                                ng-click="selectedDuplicateIndex=$index;"
                                ng-class="{selected: $index === selectedDuplicateIndex}">
                                <td style="text-align:center;">
                                    <input type="checkbox"
                                           name="checkRow"
                                           ng-model="row.isSelected"
                                           ng-change="selectRow(row, $index);" />
                                </td>
                                <td>
                                    <span ng-if="row.barcode>0">{{row.barcode}}</span>
                                    <span>{{$index}}</span>
                                    <span class="pull-right">
                                        <i class="fa fa-trash"
                                           style="color:red;"
                                           ng-click="removeRow($index)"
                                           title="@Labels.delete"></i>
                                    </span>
                                </td>
                                <td>
                                    <div class="col-xs-12">
                                        
                                        <input type="text"
                                               name="assetNo"
                                               id="assetNo"
                                               ng-model="row.assetNo"
                                               class="form-control"
                                               ng-change="checkAssetNo(row)"
                                               ng-maxlength="100"
                                               sm-duplicate-validator
                                               validate-duplicates="true"
                                               error-message="row.errorMessage"
                                               api-method="api/rentalEquipments/checkForDuplicate"
                                               primary-key-value="row.equipmentId"
                                               ng-model-options="{  debounce: { default : 500, blur: 0 }}" />
                                    </div>
                                </td>
                                <td>
                                    <input type="text"
                                           name="serialNo1"
                                           id="serialNo1"
                                           ng-model="row.serialNo1"
                                           class="form-control"
                                           ng-maxlength="100" />
                                </td>

以上内容用于模式形式(引导模式)。

我最初将10行加载到我的重复数组中,并且具有以下用于loadMore函数的代码:

$scope.loadMore = function () {

                    const last = $scope.duplicatesArray.length;
                    if (last < $scope.numberOfDuplicates) {
                        for (let i = 1; i <= 10; i++) {

                            self.logInfo("Loading more duplicates...");
                            const newEquipment = {

                                equipmentId: (last + i) * -1,
                                descrip: self.model.descrip,
                                homeShopId: self.model.homeShopId,
                                ruleId: self.model.ruleId,
                                manufacturerId: self.model.manufacturerId,
                                modelId: self.model.modelId,
                                typeId: self.model.typeId,
                                levelId: self.model.levelId,
                                equipSize: self.model.equipSize,
                                bootMm: self.model.bootMm,
                                bindingManufacturerId: self.model.bindingManufacturerId,
                                bindingModelId: self.model.bindingModelId,
                                cost: self.model.cost,
                                bindingCost: self.model.bindingCost,
                                unitCost: self.model.unitCost,
                                errorMessage: "",
                                duplicateForm: true,
                                duplicatedId: self.model.equipmentId,
                                isDuplicate: true,
                                barcode: 0,
                                assetNo: "",
                                serialNo1: "", serialNo2: "", serialNo3: "", serialNo4: "",
                                isSelected: false
                            };
                            $scope.duplicatesArray.push(newEquipment);
                        }
                    
                }
            };

此js代码中当前存在一个问题(我在循环中将最后一个

当我打开模态时,我在列表中看到20个项目,而当我滚动时,我看不到更多项目。

您看到我在做什么错吗?

此外,我对模式有以下标记是否重要:

<ng-form name="equipmentDuplicatesForm">
        <div class="modal-body">
            
            <div id="fixed-header-table">
                <div class="fixed-header-bg">                    
                </div>
                <div class="scrolling-table-body">
              table goes here
    
     </div>

        <div class="modal-footer hundred-percent padTop padBottom">
            <button type="button" class="btn btn-warning"
                    data-dismiss="modal" aria-hidden="true"
                    ng-click="$dismiss()">
                @Labels.cancel
            </button>

        </div>
    </ng-form>

0 个答案:

没有答案