Выпадающий список фильтра Angularjs в соответствии с выбранными значениями в других раскрывающихся списках
-
26-12-2019 - |
Вопрос
Я хочу реализовать следующую функциональность:
Предположим, у вас есть 1 поле ввода и 2 выпадающих списка. На поле ввода вы можете заполнить свой адрес электронной почты и рядом с тем, что вы можете выбрать, какой тип этой электронной почты (личный, профессиональный, другой или ничего).
Теперь в третьем раскрывающемся списке вы увидите список электронных писем, в которых вы можете выбрать адрес электронной почты, который вы предпочитаете.
Так что должно произойти:
1) Если в поле ввода ничего нет, предпочтительный раскрывающий список электронной почты пуст (это уже так).
2) Когда есть заполненная электронная почта и тип, который выпадающий список по электронной почте, предпочтительный раскрывающий список электронной почты должен содержать это значение: test@test.com (личный)
3) Когда есть электронная почта, заполненная, но нет типа, предпочтительный раскрывающий список электронной почты должен содержать это значение: 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:
Здесь - это скрипка, но только первый работает.
У меня нет ключа муравья, так что было бы здорово, если бы кто-то мог мне помочь с этим. Спасибо за ваше время.
sven.
Решение
Вот пример реализации - http://jsfiddle.net/iamgururaj/t7fh/5// a>
<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;
}
.