Angular-UI выберите с помощью ngInfiniteScroll выборки в куски из API не работает, как ожидалось
Я хочу сделать бесконечный выпадающий список с множественным выбором. так, например, сначала покажите первые 10 данных, затем, когда прокрутка достигнет дна, отобразите следующие 10 данных и так далее.
когда я проверяю его, он получает первый набор, а при прокрутке вниз показывает все оставшиеся данные, но только их категории.
что мне не хватает?
Кстати, когда я тестирую его в разделе фрагмента кода stackru, кажется, что он заходит в бесконечный цикл, но на моей локальной машине он не входит в бесконечный цикл.
Ps: можно например поставить email, postId а также https://jsonplaceholder.typicode.com/comments в полях ввода, затем нажмите на раскрывающийся список мой код это:
#widgetContainer {
width: 100%;
}
ul li {
list-style: none;
text-align: center;
}
ul {
height: 120px;
overflow-y: auto;
}
#loadMore {
text-align: center;
color: #aaa;
background: #ddd;
cursor: pointer;
}
#category {
text-align: center;
background: #ddd;
}
#listContainer {
width: 20%;
}
span {
cursor: pointer;
}
h4 {
background: #ddd;
color: #aaa;
}
.ui-select-bootstrap .ui-select-choices-row.active>span {
color: #262626 !important;
cursor: pointer;
background-color: #fff !important;
}
.ui-select-bootstrap .ui-select-choices-row.active>span:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.ui-select-container.ui-select-multiple.ui-select-bootstrap.dropdown.form-control {
width: 30%;
padding-left: 1%;
}
.ui-select-bootstrap .ui-select-choices-row.disabled>span,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
color: #262626 !important;
background-color: #f5f5f5 !important;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.10/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myCtrl">
<div class="myContainer">
<input type="text" class="input-sm" ng-model="api_iteration" placeholder="iteration" ng-change="apiVariable()">
<div class="form-group">
<input type="text" class="input-sm" ng-model="api_category" placeholder="category" ng-change="apiVariable()">
<input type="text" class="input-sm" ng-model="api_url" placeholder="api url" ng-change="apiVariable()">
</div>
<ui-select multiple="true" spinner-enabled="true" close-on-select="false" ng-model="selected.value" ng-click="getData()">
<ui-select-no-choice>
couldn't find anything...
</ui-select-no-choice>
<ui-select-match placeholder="Select country...">
<span>{{$item.select_name}}</span>
</ui-select-match>
<ui-select-choices id="list-wrapper" group-by="'select_category'" repeat="data in (datas | filter: $select.search) track by $index" infinite-scroll="loadMore()" infinite-scroll-distance="1" infinite-scroll-container="'#list-wrapper'">
<span>{{data.select_name}}</span>
</ui-select-choices>
</ui-select>
</div>
</div>
<script>
var app = angular.module("myApp", ['ui.select', 'ngSanitize', 'infinite-scroll']);
app.controller("myCtrl", function($scope, $http) {
$scope.api_iteration;
var api_name;
$scope.api_category;
//var api_category = "country";
$scope.api_url;
//var api_url ="https://jsonplaceholder.typicode.com/comments";
//var api_url ="data.json";
var counter = 0;
var chunks = 10;
$scope.apiVariable = function() {
}
$scope.datas = [];
$scope.getData = function getData() {
return $http({
method: "GET",
url: $scope.api_url
})
.then(function onSuccess(response) {
for (let i = counter; i < (counter + chunks); i++) {
$scope.datas.push(response.data[i]);
}
// changes "item" key identifier to "name" key identifier
$scope.datas.forEach((data) => {
data.select_name = data[$scope.api_iteration];
delete data[$scope.api_iteration];
})
$scope.datas.forEach((data) => {
data.select_category = data[$scope.api_category];
delete data[$scope.api_category];
})
})
.catch(function onError(response) {});
}
$scope.selected = {
value: $scope.datas[0]
};
$scope.loadMore = function() {
console.log("load more");
counter += chunks;
$scope.getData();
};
});
app.directive("myDirective", function() {
return {
restrict: 'AE',
templateUrl: "myTemp.html"
}
});
</script>
</body>
</html>мой файл сценария сам по себе перед бесконечным циклом без разделения данных на куски:
var app = angular.module("myApp", ['ui.select', 'ngSanitize', 'infinite-scroll']);
app.controller("myCtrl", function($scope, $http) {
$scope.api_iteration;
var api_name;
$scope.api_category;
$scope.api_url;
//var api_url ="https://jsonplaceholder.typicode.com/comments";
var counter = 0;
var chunks = 5;
$scope.apiVariable = function() {
}
$scope.datas = [];
$scope.getData = function getData() {
return $http({
method: "GET",
url: $scope.api_url
})
.then(function onSuccess(response) {
for (let i = 0; i < response.data.length; i++) {
$scope.datas.push(response.data[i]);
}
// changes "item" key identifier to "name" key identifier
$scope.datas.forEach((data) => {
data.select_name = data[$scope.api_iteration];
delete data[$scope.api_iteration];
})
$scope.datas.forEach((data) => {
data.select_category = data[$scope.api_category];
delete data[$scope.api_category];
})
counter += chunks;
})
.catch(function onError(response) {});
}
$scope.selected = {
value: $scope.datas[0]
};
$scope.loadMore = function() {
console.log("load more");
};
});
app.directive("myDirective", function() {
return {
restrict: 'AE',
templateUrl: "myTemp.html"
}
});мой скрипт сам по себе после бесконечного цикла
ценю любую помощь