我目前正在尝试创建一种表单,从两个相关的下拉菜单中选择选项。如果要更改上一个选项,则下一个选项上的数据也应根据上一个选项进行更改 因此,我创建了一个小例子,您首先选择一个国家/地区。在此之后,您可以从该国家/地区选择一个城市 数据存储在本地阵列中,稍后将通过服务获取。数据应保存在对象数组中,因为这是服务提供数据的方式,因此不需要进行任何转换。
在这里你可以看到我非常简单的代码,由于我不知道如何创建这样一个“通信”形式,这只是一个备用骨架。我希望你们能帮助我解决这类问题。
<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>
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
,因此只能选择“柏林”,“汉堡”和“慕尼黑”。不会展示巴黎或纽约等其他城市。
修改 如果每个默认选择一个国家/地区也会很好,这样就不会显示空的下拉列表。
答案 0 :(得分:2)
您可以使用'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>
答案 1 :(得分:1)
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body ng-app="AngularApp">
<div ng-controller="MainCtrl as Main">
<h1>{{Main.message}}</h1>
country:
<select name="country" ng-model="cont" ng-init="cont = cont || 'Germany'">
<option ng-selected="$first" ng-repeat="con in Main.data | unique:'country'">{{con.country}}</option>
</select>
<br/>
city:
<select name="city" ng-model="cit">
<option ng-selected="$first" ng-repeat="ct in Main.data | filter:{country: cont}">{{ct.city}}</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js" type="text/javascript"></script>
<script src="app.js"></script>
</body>
</html>
在app.js
中创建一个名为“unique”的过滤器。所以你的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'}
];
});
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
});
答案 2 :(得分:0)
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 value="" selected="selected">Choose one</option>
<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 value="" selected="selected">Choose one</option>
<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>
答案 3 :(得分:-1)
您可以使用以下HTML:
Country:
<select name="country" ng-model="country">
<option ng-repeat="option in Main.data" value="{{option.country}}">{{option.country}}</option>
</select>
City:
<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>