#javascript #jquery #html #angularjs #infinite-scroll
#javascript #jquery #HTML #angularjs #бесконечная прокрутка
Вопрос:
Я пытаюсь использовать директиву inifinite-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> Вышеуказанное используется внутри модальной формы (bootstrap modal).
Я изначально загружаю 10 строк в свой duplicatesArray, и у меня есть следующий код для функции 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-коде есть проблема (я перенес проверку на наличие last < numberOfDuplicates перед циклом, думая, что это может быть проблемой).
Когда я открываю свой модальный файл, я вижу 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> Комментарии:
1. Действительно ли вызывается
$scope.loadMore()функция?2. Я вижу, что в консоли 10 загружается больше дубликатов… хотя я еще не прокручивал. Когда я прокручиваю, я не вижу никаких дополнительных сообщений в консоли. Я могу сделать перерыв в функции, чтобы посмотреть, вызвана ли она.
3. Я ввел break в эту функцию, и я не вижу, что она вообще вызывается при прокрутке. Это определено в области контроллера моей модальной формы. Вместо этого я могу попробовать определить это на главном контроллере.
4. Итак, почему он изначально вызывается дважды? В моей таблице заголовок также является директивой, использующей ng-repeat, но я попытался добавить эту директиву в тег tbody. Я не смог найти никакой документации, которая является поддерживаемым использованием. Кроме того, имеет ли значение, что у меня есть фиксированный нижний колонтитул внизу моей модальной формы?
5. Его трудно идентифицировать без рабочего примера, но очень похоже, что
$scope.loadMore()вызывается при загрузке страницы, а затем снова, потому что есть свободное место для загрузки еще 10 записей — после этого может возникнуть проблема с CSS / layout, из-за которой неправильно определяется нижняя часть div / таблицы