我目前正在尝试创建一种表单来从两个相关的下拉菜单中选择选项。如果您更改上一项的选项，则下一项的数据也应根据上一项的变化而变化。
因此，我创建了一个小示例，您首先选择一个国家/地区。之后您可以选择该国家/地区的一个城市。
数据存储在本地数组中，稍后将通过服务获取。数据应保存在对象数组中，因为这就是服务提供数据的方式，因此不需要转换。
在这里你可以看到我非常简单的代码，目前它只是一个备用框架，因为我不知道如何创建这样一个“通信”表单。希望大家能帮我解决这个问题。
HTML
<body ng-app="AngularApp">
<div ng-controller="MainCtrl as Main">
<h1>{{Main.message}}</h1>
country:
<select name="country">
<option></option>
</select>
<br/>city:
<select name="city">
<option></option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
App.js
var app = angular.module('AngularApp', []);
app.controller("MainCtrl", function() {
var vm = this;
vm.message = "Select your destination";
vm.data = [
{ city: 'Berlin', country: 'Germany' },
{ city: 'Hamburg', country: 'Germany' },
{ city: 'Munich', country: 'Germany' },
{ city: 'New York', country: 'USA' },
{ city: 'Whashington DC', country: 'USA' },
{ city: 'Paris', country: 'France' }
];
});
var app = angular.module('AngularApp', []);
app.controller("MainCtrl", function() {
var vm = this;
vm.message = "Select your destination";
vm.data = [
{ city: 'Berlin', country: 'Germany' },
{ city: 'Hamburg', country: 'Germany' },
{ city: 'Munich', country: 'Germany' },
{ city: 'New York', country: 'USA' },
{ city: 'Whashington DC', country: 'USA' },
{ city: 'Paris', country: 'France' }
];
});<body ng-app="AngularApp">
<div ng-controller="MainCtrl as Main">
<h1>{{Main.message}}</h1>
country:
<select name="country">
<option></option>
</select>
<br/>city:
<select name="city">
<option></option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>附加说明:
因此，如果您选择“德国”作为您的国家/地区，则由于 country 属性，在城市选择中只有“柏林”、“汉堡”和“慕尼黑”选项可用。巴黎或纽约等其他城市将不会显示。
编辑 如果默认选择一个国家/地区，那就太好了，这样就不会显示空的下拉菜单。
最佳答案
您可以使用'angular-filter'模块来显示独特的选项。
<select name="country" ng-model="country">
<option ng-repeat="option in Main.data | unique: 'country'"
value="{{option.country}}">{{option.country}}</option>
</select>
<select name="city" ng-model="city">
<option ng-repeat="option in Main.data" ng-if="option.country == country"
value="{{option.city}}">{{option.city}}</option>
</select>
示例
我向表单添加了一些 Bootstrap 类以清理其表示形式。 :)
var app = angular.module('AngularApp', ['angular.filter']);
app.controller("MainCtrl", function() {
var vm = this;
vm.message = "Select Your Destination";
vm.data = [
{ city: 'Berlin', country: 'Germany' },
{ city: 'Hamburg', country: 'Germany' },
{ city: 'Munich', country: 'Germany' },
{ city: 'New York', country: 'USA' },
{ city: 'Whashington DC', country: 'USA' },
{ city: 'Paris', country: 'France' }
];
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body ng-app="AngularApp">
<div ng-controller="MainCtrl as Main" class="container">
<h1>{{Main.message}}</h1>
<form>
<div class="form-group">
<label>Country</label>
<select name="country" ng-model="country" class="form-control">
<option ng-repeat="option in Main.data | unique: 'country'" value="{{option.country}}">{{option.country}}</option>
</select>
</div>
<div class="form-group">
<label>City</label>
<select name="city" ng-model="city" class="form-control">
<option ng-repeat="option in Main.data" ng-if="option.country == country" value="{{option.city}}">{{option.city}}</option>
</select>
</div>
<br />
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>关于javascript - 创建两个动态下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39227396/