gpt4 book ai didi

javascript - angularjs根据其他下拉列表中的选定值过滤下拉列表

转载 作者:行者123 更新时间:2023-11-30 10:15:28 27 4
gpt4 key购买 nike

我想实现以下功能:

假设您有 1 个输入字段和 2 个下拉列表。在输入字段中,您可以填写您的电子邮件地址,然后您可以在旁边选择此电子邮件的类型(个人、专业、其他或无)。

现在,在第三个下拉列表中,您将看到一个电子邮件列表,您可以从中选择您喜欢的电子邮件地址。

那么应该发生什么:

1) 如果输入字段中没有任何内容,则首选电子邮件下拉列表为空(这已经是这种情况)。

2) 当填写了电子邮件和类型时,首选电子邮件下拉列表应包含此值:例如test@test.com(个人)

3) 当填写了电子邮件但没有填写 TYPE 时,首选电子邮件下拉列表应包含此值:test@test.com 例如没有类型.


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>


脚本:

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":"member@test.com"}, {"id":1200, "emailTypeId":1,"email":"member2@test.com"}];
$scope.contactInfo.prefferedEmail = {};

$scope.filterEmail = function(email){
return (email.email);
}
}


JSFIDDLE:

HERE是 fiddle ,但只有第一个在工作。

我没有 Ant 线索,所以如果有人能帮助我,那就太好了。感谢您的宝贵时间。

斯文。

最佳答案

这是一个示例实现 - http://jsfiddle.net/iamgururaj/T7fkH/5/

代码:

<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:

$scope.contactInfo = {
emails: [{
"id": 1100,
"emailTypeId": "2",
"email": "1@test.com"
}, {
"id": 1200,
"emailTypeId": "1",
"email": "2@test.com"
}]
};
$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;
}

关于javascript - angularjs根据其他下拉列表中的选定值过滤下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24061273/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com