Elenco a discesa filtro AngularJS in base ai valori selezionati in altri elenchi a discesa
-
26-12-2019 - |
Domanda
Voglio implementare le seguenti funzionalità:
Supponi di avere 1 campo di ingresso e 2 elenchi a discesa. Al campo di input è possibile compilare il tuo indirizzo e-mail e accanto a ciò è possibile scegliere il tipo di tipo Questa e-mail è (personale, professionale, altro o nulla).
Ora nel terzo elenco a discesa vedrai un elenco di e-mail in cui è possibile scegliere, l'indirizzo e-mail che preferisci.
Allora, cosa dovrebbe accadere:
1) Se non c'è nulla nel campo di input L'elenco a discesa e-mail preferito è vuoto (questo è già il caso).
2) Quando c'è una e-mail riempita e un tipo, l'elenco a discesa e-mail preferito deve contenere questo valore: test@test.com (personale) ad esempio.
3) Quando c'è una e-mail riempita ma nessun tipo, l'elenco a discesa e-mail preferito deve contenere questo valore: test@test.com ad esempio SO senza il tipo .
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:
qui è il violino, ma solo il primo sta funzionando.
Non ho la formica in modo che sarebbe bello se qualcuno potesse aiutarmi con questo. Grazie per il tuo tempo.
Sven.
Soluzione
Ecco un'implementazione del campione - 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>
.
$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;
}
.