[英]how to populate a drop down menu with data coming to controller using http get in angular js
这是JSON文件。使用angular js控制器并查看如何解析此json并在下拉菜单中显示相应技术的drop1和drop2值。使用http get获取JSON数据。 提前致谢
{
"technology": [
{
"id": "AKC",
"detail": {
"drop1": [
{
"id": "AKC-lst-1231"
},
{
"id": "AKC-lst-1232"
},
{
"id": "AKC-lst-1233"
}
],
"drop2": [
{
"id": "T_AKC_live"
},
{
"id": "T_AKC_Capt"
},
{
"id": "T_AKC_live1"
}
]
}
},
{
"id": "MET",
"detail": {
"drop1": [
{
"id": "MET-2st"
},
{
"id": "MET-34"
}
],
"drop2": [
{
"id": "sd-232"
},
{
"id": "sd-121"
}
]
}
}
]
}
请考虑这个例子:
<!DOCTYPE html>
<html ng-app="postExample">
<head>
<script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="usersController.js"></script>
<script src="userRepoService.js"></script>
</head>
<body ng-controller="UsersController">
<h1>Post Angular Example</h1>
<select id="UserSelector" style="width: 100%;">
<option ng-repeat="user in users" value="{{user.id}}">{{user.login}} </option>
</select>
</body>
</html>
userRepoService.js
(function(){
var userRepoService = function($http){
var getUsers = function(username){
return $http.get("https://api.github.com/users")
.then(function(response){
return response.data;
});
};
return {
get: getUsers
};
};
var module = angular.module("postExample");
module.factory("userRepoService", userRepoService);
}());
控制器:
(function(){
var app = angular.module("postExample",[]);
var UsersController = function($scope, userRepoService){
var onFetchError = function(message){
$scope.error = "Error Fetching Users. Message:" +message;
};
var onFetchCompleted = function(data){
$scope.users =data;
};
var getUsers = function(){
userRepoService.get().then(onFetchCompleted,onFetchError);
};
getUsers();
};
app.controller("UsersController", UsersController);
}());
您可以直接调用$http
服务,并在成功数据参数中获取该响应。
码
$http.get("test.json").
success(function(data, status, headers, config) {
//get data and play with it
}).
error(function(data, status, headers, config) {
alert("Error fetching data");
// log error
});
希望这可以帮助你,谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.