javascript - angularjs filter drop-down list according to selected values in other drop-down lists - Stack Overflow

admin管理员组

文章数量:1355645

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

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

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.

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.

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:

HERE is 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.

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

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

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.

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.

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:

HERE is 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.

• javascript
• angularjs
• drop-down-menu
• filter
• ng-options

Share Improve this question Follow edited Jun 5, 2014 at 13:26 timgeb 78.9k2020 gold badges128128 silver badges150150 bronze badges asked Jun 5, 2014 at 13:16 SvenSven 13922 gold badges44 silver badges1313 bronze badges 1

• here is a good reference for what you want to. egghead.io/lessons/angularjs-ngrepeat-and-filtering-data. You would want to use a factory to create a shared data service so that it outputs a filtered list of items to your dropdowns. egghead.io/lessons/angularjs-isolate-scope-review is also a good reference – Jesse Commented Jun 5, 2014 at 13:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is a sample implementation - http://jsfiddle/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:

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

本文标签：