Javascript angularjs根据其他下拉列表中的选定值筛选下拉列表

我想实现以下功能：

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

现在，在第三个下拉列表中，您将看到一个可供选择的电子邮件列表，即您喜欢的电子邮件地址

那么应该怎么办：

1） 如果输入字段中没有任何内容，则首选电子邮件下拉列表为空（情况已经如此）

2） 当有填写的电子邮件和类型时，首选电子邮件下拉列表应包含以下值：test@test.com（个人）例如

3） 当填写了电子邮件但没有类型时，首选电子邮件下拉列表应包含以下值：test@test.com例如，如果没有类型，则为so

HTML:

JSFIDDLE：

是小提琴，但只有第一把起作用

我没有蚂蚁的线索，所以如果有人能帮我解决这个问题就太好了。谢谢你抽出时间

---

Sven.

以下是一个示例实现-

代码：

---

下面是一个示例实现-

代码：

---

这里有一个很好的参考资料供你参考。您可能希望使用工厂来创建共享数据服务，以便它将过滤后的项目列表输出到您的下拉列表中。也是一个很好的参考这里是一个很好的参考，为你想要的。您可能希望使用工厂来创建共享数据服务，以便它将过滤后的项目列表输出到您的下拉列表中。也是一个很好的参考谢谢你的回答，但这里的问题是，当你有一个空的电子邮件地址时，类型仍然显示。应该没有任何价值。还有，当有电子邮件但没有类型时，您会看到带有空括号的电子邮件地址。应该检查输入字段是否为空。我想你已经有了一个过滤器。在您的逻辑中包含相同的内容-啊，是的，很好，如果没有选择类型，是否也可能没有括号，因为电子邮件地址后面会显示空括号？谢谢。更新版本将删除括号（如果为空）-感谢您的回答，但这里的问题是，当您的电子邮件地址为空时，类型仍然显示。应该没有任何价值。还有，当有电子邮件但没有类型时，您会看到带有空括号的电子邮件地址。应该检查输入字段是否为空。我想你已经有了一个过滤器。在您的逻辑中包含相同的内容-啊，是的，很好，如果没有选择类型，是否也可能没有括号，因为电子邮件地址后面会显示空括号？谢谢。更新版本删除括号（如果为空）-

<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);
    }
}

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

$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;
    }