Liste déroulante Filtre Angularjs Selon les valeurs sélectionnées dans d'autres listes déroulantes

Question

Je veux implémenter les fonctionnalités suivantes:

Supposons que vous ayez 1 champ de saisie et 2 listes déroulantes. Dans le champ Entrée, vous pouvez remplir votre adresse e-mail et à côté de celui que vous pouvez choisir quel type de type cet e-mail est (personnel, professionnel, autre ou rien).

Maintenant dans la troisième liste déroulante, vous verrez une liste de courriers électroniques dans lesquels vous pouvez choisir, l'adresse e-mail que vous préférez.

Alors, que devrait-il arriver:

1) S'il n'y a rien dans le champ Entrée, la liste déroulante E-mail préférée est vide (c'est déjà le cas).

2) Lorsqu'il y a un e-mail rempli et un type, la liste déroulante E-mail préférée doit contenir cette valeur: test@test.com (personnel) par exemple.

3) Lorsqu'il y a un courrier électronique rempli mais sans type, la liste déroulante E-mail préférée doit contenir cette valeur: test@test.com par exemple sans le 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":"member@test.com"}, {"id":1200, "emailTypeId":1,"email":"member2@test.com"}];
    $scope.contactInfo.prefferedEmail = {};

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

Jsfiddle:

ici est le violon, mais seul le premier fonctionne.

Je n'ai pas d'indication de fourmi, donc ce serait génial si quelqu'un pouvait m'aider avec ça. Merci pour votre temps.

Sven.

Answer 1

Voici un exemple de mise en œuvre - 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:

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