我正在学习使用纯 AngularJS 和我从 YouTube 视频中复制的以下代码进行自动完成。
我卡在了这个特定的部分:
Controller
myApp.controller("myWeatherContrl", function ($scope, weatherService) {
$scope.title = "Weather App";
weatherService.getCities().then(function (response) {
$scope.data = response;
//console.log("Say Hi", $scope.data);
})
$scope.complete = function (string) {
var output = [];
angular.forEach($scope.data, function (city) {
if (city.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(city);
}
});
$scope.filterCity = output;
};
$scope.fillTextbox = function(string){
$scope.city = string;
$scope.hidethis = true;
};
});
服务
myApp.service("weatherService", ['$http', '$q', function ($http, $q) {
return {
getCities: function () {
return $http.get('data/data.json');
}
};
}]);
HTML(指令)
<div class="input-group">
<input type="text" id="city" ng-keyup="complete(city)" placeholder="Enter City Name" class="form-control" ng-model="city"/>
<ul class="list-group">
<li class="list-group-item" ng-model="hidethis" ng-hide="hidethis" ng-click="fillTextbox(citydata)" ng-repeat="citydata in filterCity">
{{citydata}}
</li>
</ul>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="style/style.css" rel="stylesheet" />
</head>
<body ng-app="myWeatherApp" ng-controller="myWeatherContrl">
<div class="container">
<label ng-cloak>{{title}}</label>
<ui-view></ui-view>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<script src="Scripts/controller/weathercntrl.js"></script>
<script src="Scripts/service/weather.js"></script>
</body>
</html>
我收到一个错误，因为 city.toLowerCase 不是一个函数。
最佳答案
试试这个:
var myApp = angular.module("myApp", []);
myApp.controller("myWeatherContrl", function($scope, weatherService) {
$scope.title = "Weather App";
$scope.obj = {};
$scope.obj.data = [];
weatherService.getCities().then(function(response) {
angular.forEach(response.data, function(state) {
angular.forEach(state, function(city) {
if (typeof city === "string") {
$scope.obj.data .push(city);
}
});
});
console.log("Say Hi", $scope.data);
})
$scope.complete = function(string) {
var output = [];
if (string.length >= 3) {
angular.forEach($scope.obj.data , function(city) {
if (city.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(city);
}
});
}
$scope.filterCity = output;
};
$scope.fillTextbox = function(string) {
$scope.city = string;
$scope.hidethis = true;
};
});
myApp.service("weatherService", ['$http', '$q', function($http, $q) {
return {
getCities: function() {
return $http.get('https://api.myjson.com/bins/pufq5');
}
};
}]);<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myWeatherContrl">
<div class="input-group">
<input type="text" id="city" ng-keyup="complete(obj.city)" placeholder="Enter City Name" class="form-control" ng-model="obj.city" />
<ul ng-if="obj.data.length>0" class="list-group">
<li style="cursor:pointer" class="list-group-item" ng-click="obj.city = citydata;obj.data={};" ng-repeat="citydata in filterCity track by $index">
{{citydata}}
</li>
</ul>
</div>
</body>关于javascript - 使用 json 值在 Angularjs 中自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45825552/