В моем приложении Angularjs я пытаюсь сделать выпадающий мульти-выбор, который сначала загружает данные из JSON, а когда я нажимаю «загрузить еще», получает больше данных из JSON и во время загрузки показывает индикатор загрузки загрузки.Но это ничего не показывает, пока я не поменяю поле и загрузка не работает равномерно.ценю любую помощь.мои данные таковы:
[
{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}
]
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
/* ===== VARIABLES ===== */
/* loading indicator */
$scope.dataLoading = true;
// data variables
$scope.data2Show = [];
$scope.data = [];
// variables for get requests
var counter = 0;
var chunks = 5;
// variables for checkbox
$scope.selectedItems = [];
//variables for opening dropdown
$scope.selectEnable = false;
// method for opening dropdown
$scope.openSelect = function () {
$scope.selectEnable = !$scope.selectEnable;
};
/* ===== Functions ===== */
// initial success method
function onSuccess(response) {
for (let i = 0; i < chunks; i++) {
$scope.data.push(response.data[i]);
}
counter += chunks;
}
// Error method
function onError(response) {
console.log("error");
}
// load more success method
function loadMoreSuccess(response) {
for (let i = counter; i < (counter + chunks); i++) {
$scope.data.push(response.data[i]);
}
counter += chunks;
}
/* get methods */
// initial get method
$http({
method: "GET",
url: "data.json"
})
.then(onSuccess)
.catch(onError)
.finally(function () {
$scope.dataLoading = false;
});
// load more method
$scope.loadMore = function () {
$http({
method: "GET",
url: "data.json"
})
.then(loadMoreSuccess)
.catch(onError)
.finally(function () {
$scope.dataLoading = false;
});
};
/* when checkbox changes if the item is checked
is alteady in the selected
items it will remove it because it means that
the checkbox is unchecked and if the item
is not in selected items it will add that */
$scope.itemChecked = function (data) {
var selected = $scope.selectedItems.indexOf(data.item);
if (selected == -1) {
$scope.selectedItems.push(data.item);
} else {
$scope.selectedItems.splice(selected, 1);
}
};
// when the searchField content changes this function executes
$scope.filter = function () {
if (!$scope.searchField) {
$scope.data2Show = angular.copy($scope.data);
/* if searchField is empty make a copy of our data */
} else {
/* if searchField is not empty data2show will be empty and iterate the data array and for each element if the searched sentence is in the data array that data will be pushed into the data2show array */
$scope.data2Show = [];
$scope.data.map(function (itm) {
if (itm.item.indexOf($scope.searchField) != -1) {
$scope.data2Show.push(itm);
}
});
}
};
});
ul li {
list-style: none;
text-align: center;
}
ul {
height: 100px;
overflow-y: scroll;
}
#loadMore {
text-align: center;
color: #aaa;
background: #ddd;
cursor: pointer;
}
#category {
text-align: center;
background: #ddd;
}
#listContainer {
width: 20%;
}
span {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js
"></script>
<link rel="stylesheet" href="stylesheet/style.css">
</head>
<body ng-controller="myCtrl">
<input type="text" ng-click="openSelect()">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show" ng-model="data2show">
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>
<script src="script/script.js"></script>
</body>
</html>