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

时间:2014-06-05 13:16:52

标签: javascript angularjs drop-down-menu filter ng-options

我想实现以下功能:

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

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

那会发生什么:

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

2)当电子邮件填写为AND TYPE时,首选电子邮件下拉列表应包含此值: 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>


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

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


的jsfiddle:

HERE是小提琴,但只有第一个正在发挥作用。

我没有蚂蚁线索,所以如果有人可以帮助我,这将是很好的。谢谢你的时间。

斯文。

1 个答案:

答案 0 :(得分:4)

以下是一个示例实现 - 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;
    }