раскрывающийся список фильтров angularjs в соответствии с выбранными значениями в других раскрывающихся списках

Я хочу реализовать следующий функционал:

Предположим, у вас есть 1 поле ввода и 2 выпадающих списка. В поле ввода вы можете ввести свой адрес электронной почты, а рядом с ним вы можете выбрать, к какому типу относится это электронное письмо (Личное, Профессиональное, Другое или ничего).

Теперь в третьем раскрывающемся списке вы увидите список адресов электронной почты, из которых вы можете выбрать тот адрес электронной почты, который вам больше нравится.

Итак, что должно произойти:

1) Если в поле ввода ничего нет, выпадающий список предпочитаемых адресов электронной почты пуст (это уже так).

2) Если адрес электронной почты заполнен И ТИП, раскрывающийся список предпочтительных адресов электронной почты должен содержать это значение: например, [email protected] (личный).

3) Если адрес электронной почты заполнен, но отсутствует ТИП, раскрывающийся список предпочтительных адресов электронной почты должен содержать это значение: [email protected], например, без типа.


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>


ЯВАСКРИПТ:

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:

ЗДЕСЬ — это скрипка, но работает только первая.

Я понятия не имею, поэтому было бы здорово, если бы кто-нибудь помог мне с этим. Спасибо за ваше время.

Свен.


javascript drop-down-menu filter angularjs ng-options
person Sven    schedule 05.06.2014    source источник
comment
вот хорошая ссылка на то, что вы хотите. egghead.io/lessons/angularjs-ngrepeat-and-filtering-data. Вы хотели бы использовать фабрику для создания службы общих данных, чтобы она выводила отфильтрованный список элементов в раскрывающиеся списки. egghead.io/lessons/angularjs-isolate-scope-review также является хорошая ссылка   -  person Jesse    schedule 05.06.2014

Ответы (1)


arrow_upward
4
arrow_downward

Вот пример реализации — 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": "[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;
    }
person guru    schedule 05.06.2014
comment
Спасибо за ваш ответ, но проблема здесь в том, что когда у вас есть пустой адрес электронной почты, тип все еще отображается. Не должно быть никакой ценности вообще. Также, когда есть электронная почта, но не тип, вы видите адрес электронной почты с пустыми скобками. В поле ввода должна быть проверка, чтобы увидеть, пусто оно или нет. - person Sven; 05.06.2014
comment
Я думаю, у вас уже есть фильтр для этого. включите то же самое в свою логику - jsfiddle.net/iamgururaj/T7fkH/4 - person guru; 05.06.2014
comment
Ах, да, хорошо, а также возможно ли не иметь скобок, когда не выбран тип, потому что после адреса электронной почты отображаются пустые скобки? Спасибо. - person Sven; 05.06.2014
comment
Обновленная версия для удаления квадратных скобок, если они пусты — jsfiddle.net/iamgururaj/T7fkH/5 - person guru; 05.06.2014