javascript angularjs 根据其他下拉列表中的选定值过滤下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24061273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs filter drop-down list according to selected values in other drop-down lists
提问by Sven
I want to implement the following functionality:
我想实现以下功能：
Suppose you have 1 input field and 2 drop-down lists. At the input field you can fill in your e-mail address and next to that you can choose what kind of type this e-mail is (Personal, Professional, Other, or nothing).
假设您有 1 个输入字段和 2 个下拉列表。在输入字段中，您可以填写您的电子邮件地址，然后您可以选择此电子邮件的类型（个人、专业、其他或无）。
Now in the third drop-down list you will see a list of e-mails where you can choose from, the e-mail address you prefer.
现在在第三个下拉列表中，您将看到一个电子邮件列表，您可以从中选择您喜欢的电子邮件地址。
So what should happen:
那么应该发生什么：
1) If there is nothing in the input field the preferred e-mail drop-down list is empty (this is already the case).
1) 如果输入字段中没有任何内容，则首选电子邮件下拉列表为空（已经是这种情况）。
2) When there is an e-mail filled in AND a TYPE, the preferred e-mail drop-down list should contain this value: [email protected] (Personal)for example.
2) 当填写了一个电子邮件和一个类型时，首选电子邮件下拉列表应包含此值：例如[email protected] (Personal)。
3) When there is an e-mail filled in but no TYPE, the preferred e-mail drop-down list should contain this value: [email protected]for example so without the type.
3) 当填写了电子邮件但没有类型时，首选电子邮件下拉列表应包含此值：例如[email protected]所以没有类型。
HTML:
HTML：
<div ng-repeat="email in contactInfo.emails">
<input id="email" type="text" ng-model="email.email"/>
<select id="emailType" ng-model="email.emailTypeId" ng-options="emailType.id as emailType.name for emailType in emailTypes">
<option value="">Choose...</option>
</select>
</div>
<br/><br/>
<label>Preferred e-mail:</label>
<select style="margin-left: 20px; width: 50%;" id="preferred-email" ng-model="contactInfo.preferredEmail" ng-options="email.email for email in (contactInfo.emails | filter:filterEmail) track by email.id">
<option value="">Choose...</option>
</select>
JAVASCRIPT:
爪哇脚本：
function MyCtrl($scope){
$scope.contactInfo = {};
$scope.emailTypes = [{"label":"Personal","id":1,"name":"Personal","rank":2},{"label":"Professional","id":2,"name":"Professional","rank":2},{"label":"Other","id":3,"name":"Other","rank":4}];
$scope.contactInfo.emails = [{"id":1100, "emailTypeId":2,"email":"[email protected]"}, {"id":1200, "emailTypeId":1,"email":"[email protected]"}];
$scope.contactInfo.prefferedEmail = {};
$scope.filterEmail = function(email){
return (email.email);
}
}
JSFIDDLE:
JSFIDDLE：
HEREis the fiddle but only the first one is working.
这是小提琴，但只有第一个在工作。
I don't have ant clue so it would be great if someone could help me with this. Thank you for your time.
我没有蚂蚁线索，所以如果有人能帮我解决这个问题会很棒。感谢您的时间。
Sven.
斯文。
回答by guru
Here is a sample implementation - http://jsfiddle.net/iamgururaj/T7fkH/5/
这是一个示例实现 - http://jsfiddle.net/iamgururaj/T7fkH/5/
Code:
代码：
<select style="margin-left: 20px; width: 50%;" id="preferred-email" ng-model="contactInfo.preferredEmail" ng-options="getEmail(email) for email in (contactInfo.emails | filter:filterEmail) track by email.id">
<option value="">Choose...</option>
</select>
JS:
JS：
$scope.contactInfo = {
emails: [{
"id": 1100,
"emailTypeId": "2",
"email": "[email protected]"
}, {
"id": 1200,
"emailTypeId": "1",
"email": "[email protected]"
}]
};
$scope.emailTypes = {
"1": "Personal",
"2": "Professional",
"3": "Other"
};
$scope.filterEmail = function (email) {
return (email.email);
}
$scope.getEmail = function (email) {
if (email.emailTypeId) {
return email.email + ' (' + $scope.emailTypes[email.emailTypeId] + ')';
}
return email.email;
}
