在AngularJS中,可以通过以下步骤从两个外部JSON文件中创建基于countryName和加载状态的选择选项下拉列表:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<!-- 下拉列表 -->
<select ng-model="selectedCountry">
<option value="">选择国家</option>
<option ng-repeat="country in countries" value="{{country.name}}">{{country.name}}</option>
</select>
<!-- 加载状态 -->
<div>{{loadingStatus}}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$scope.loadingStatus = "加载中...";
// 从外部JSON文件获取国家数据
$http.get('countries.json').then(function(response) {
$scope.countries = response.data;
$scope.loadingStatus = "";
}, function(error) {
$scope.loadingStatus = "加载失败";
console.log(error);
});
});
</script>
</body>
</html>
countries.json
的外部JSON文件,其中包含国家数据。例如:[
{"name": "中国"},
{"name": "美国"},
{"name": "日本"},
// 其他国家...
]
loadingStatus.json
的外部JSON文件,其中包含加载状态数据。例如:[
{"status": "加载中"},
{"status": "加载完成"},
{"status": "加载失败"},
// 其他状态...
]
通过以上步骤,你就可以在AngularJS中从两个外部JSON文件中创建基于countryName和加载状态的选择选项下拉列表。当页面加载时,AngularJS会通过$http
服务从countries.json
文件中获取国家数据,并将其绑定到下拉列表中。同时,加载状态会显示为"加载中...",直到数据加载完成。如果加载失败,加载状态会显示为"加载失败"。
领取专属 10元无门槛券
手把手带您无忧上云