創建兩個動態下拉菜單
[英]Create two dynamic dropdown menus
問題描述
我目前正在嘗試創建一種表單，以便從兩個相關的下拉菜單中選擇選項。 如果要更改上方的選項，則下方的數據也應根據上方的一個而更改。
因此，我創建了一個小示例，您首先選擇一個國家。 之后，您可以從該國家中選擇一個城市。
數據存儲在本地數組中，以后將通過服務獲取。 數據應保存在對象數組中，因為這是服務提供數據的方式，因此無需進行轉換。
在這里，您可以看到我非常簡單的代碼，由於我不知道如何創建這種“交流”形式，因此這只是一個備用骨架。 希望你們能幫助我解決此類問題。
的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屬性，選項“柏林”，“漢堡”和“慕尼黑”應該僅可用。 不會顯示其他城市，如巴黎或紐約。
編輯如果默認情況下選擇一個國家，這也很好，這樣就不會顯示空的下拉菜單。
4 個解決方案
解決方案1
2 已采納 2016-08-30 13:16:36
您可以使用'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>
解決方案2
1 2016-08-30 12:56:03
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;
};
});
解決方案3
0 2016-08-30 13:54:01
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>
解決方案4
-1 2016-08-30 12:32:44
您可以在下面的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>
如何在jQuery Mobile中使用JSON文件創建動態下拉菜單
[英]How to create dynamic dropdown menus with json files in jquery mobile
如何使用相同的.dropit CSS文件創建兩個具有不同屬性的下拉菜單？
[英]How do I create two dropdown menus with different properties using the same .dropit css file?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.