Question

在我的Angularjs应用程序中，我尝试制作一个下拉多选项，首先从JSON加载数据，当我点击＆＃34;加载更多＆＃34;从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
}
]

＆＃13;

"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);
				}
			});
		}
	};

});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

加载指标：要显示$scope.dataLoading的加载指标必须设置为true。这只是最初一次完成。它也应该在调用$scope.loadMore

HttpService.get

未显示的新元素：您仅在$scope.loadMore中将加载的元素存储在$state.data中。要显示它们，还必须存储在$scope.data2show中。因此，只需在从服务器加载新元素后调用$scope.filter。

Angularjs下拉列表未显示直到字段已更改且加载指示符无法正常工作

1 个答案: